Vue Academy · 강의

메모이제이션 기법

메모이제이션으로 중복 계산을 방지합니다.

메모이제이션 기법은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 3개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

작업 줄이기

성능은 변경되지 않은 항목을 재계산하거나 다시 렌더링하지 않는 것에서 나오는 경우가 많습니다. Vue는 결과를 캐시하고 불필요한 업데이트를 건너뛸 수 있는 여러 메모이제이션 도구를 제공합니다.

계산된 값 캐싱

계산된 속성은 결과를 캐시하고 반응형 의존성 중 하나가 변경될 때만 다시 계산합니다. 따라서 렌더링할 때마다 실행되는 메서드보다 훨씬 저렴합니다.

computed: {
  expensiveTotal() {
    return this.items.reduce((sum, i) => sum + i.price, 0)
  }
}

계산된 값과 메서드 비교

메서드는 입력값이 동일하더라도 템플릿이 다시 렌더링될 때마다 실행됩니다. 계산된 값은 캐시된 값을 재사용하므로 템플릿에서 사용하는 파생 데이터에는 계산된 값을 우선 사용하십시오.

// method: runs on EVERY render
methods: { total() { /* ... */ } }

// computed: cached until items change
computed: { total() { /* ... */ } }

정적 콘텐츠에 v-once 사용하기

v-once 지시문은 요소를 한 번만 렌더링한 다음 이후의 모든 업데이트에서 해당 요소를 건너뜁니다. 절대 변경되지 않는 콘텐츠에 사용하십시오.

<template>
  <h1 v-once>{{ appTitle }}</h1>
</template>

v-once를 사용하는 경우

바닥글, 약관 텍스트 또는 고정된 머리글처럼 큰 정적 영역에 v-once를 적용하십시오. Vue는 렌더링된 출력을 정적으로 처리하며 다시 비교하지 않습니다.

<footer v-once>
  <p>Copyright 2024. All rights reserved.</p>
</footer>

비용이 큰 목록에 v-memo 사용하기

v-memo 지시문은 하위 트리를 메모이제이션하고 의존성 배열의 값이 변경될 때만 다시 렌더링합니다. 큰 목록에서 특히 효과적입니다.

<div v-for="item in list" :key="item.id" v-memo="[item.selected]">
  {{ item.name }} - {{ item.selected }}
</div>

v-memo의 작동 방식

각 항목은 메모 배열이 변경될 때만 다시 렌더링됩니다. item.selected가 그대로라면 부모가 업데이트되더라도 Vue는 해당 행 전체를 다시 렌더링하지 않습니다.

불필요한 다시 렌더링 방지하기

컴포넌트는 반응형 데이터나 속성이 변경될 때 다시 렌더링됩니다. 컴포넌트를 작고 집중된 형태로 유지하여 한 영역의 변경이 관련 없는 다른 부분까지 다시 렌더링하게 만들지 마십시오.

목록에서 안정적인 키 사용하기

항상 v-for에 안정적이고 고유한 :key를 지정하십시오. 배열 인덱스를 키로 사용하면 Vue가 잘못된 DOM 노드를 재사용하고 필요 이상으로 다시 렌더링할 수 있습니다.

<!-- prefer a stable id -->
<li v-for="user in users" :key="user.id">{{ user.name }}</li>

반응형 데이터 최소화하기

템플릿이 의존하는 데이터만 반응형 상태에 넣으십시오. 큰 객체나 UI에서 절대 변경되지 않는 값은 반응성 추적에 불필요한 부담을 더합니다. 적절한 경우 일반 비반응형 변수를 사용하십시오.

import { shallowRef } from "vue"

// shallowRef avoids deep reactivity on large objects
const bigConfig = shallowRef(loadConfig())

순수 함수 메모이제이션하기

Vue 반응성 외부에서 순수한 JavaScript 계산을 수행한다면 간단한 맵에 결과를 캐시할 수 있습니다. 그러면 같은 입력값으로 반복 호출할 때 결과를 즉시 반환합니다.

const cache = new Map()
function fib(n) {
  if (n < 2) return n
  if (cache.has(n)) return cache.get(n)
  const result = fib(n - 1) + fib(n - 2)
  cache.set(n, result)
  return result
}

빠른 확인

메모이제이션에 대한 지식을 테스트해 보십시오.

복습

캐싱으로 낭비되는 작업을 줄이십시오. 계산된 속성은 파생 값을 메모이제이션하고, v-once는 정적 콘텐츠를 한 번만 렌더링하며, v-memo는 큰 목록에서 하위 트리의 다시 렌더링을 건너뜁니다. 안정적인 키를 사용하고 반응형 상태를 최소화하십시오. 다음에는 실제 도구로 성능 병목을 찾고 해결하는 방법을 배웁니다.

자주 묻는 질문

“메모이제이션 기법” 강의는 무료인가요?

네 — “메모이제이션 기법” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 3개의 강의가 포함되어 있습니다.

“메모이제이션 기법”에서 뭘 배우나요?

메모이제이션으로 중복 계산을 방지합니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Vue Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 3개 중 2번째 강의입니다.

“메모이제이션 기법” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Vue Academy(으)로 돌아가기