Vue Academy · 강의

템플릿 메모이제이션을 위한 v-memo

v-memo 디렉티브, 의존성 배열, 다시 렌더링을 건너뛰는 경우와 computed와의 차이를 다룹니다.

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

v-memo란 무엇인가요

v-memo는 템플릿의 한 부분을 메모이제이션합니다. Vue는 렌더링된 결과를 캐시하고 나열된 종속성 중 하나가 변경될 때만 해당 하위 트리를 다시 렌더링합니다. 대부분 정적인 마크업의 렌더링 비용이 클 때 사용할 수 있는 성능 최적화 수단입니다.

종속성 배열

종속성 배열을 바인딩합니다. 배열의 모든 값이 이전 값과 같은 동안 Vue는 요소 전체와 그 자식 요소의 업데이트를 건너뜁니다.

<div v-memo="[dep1, dep2]">
  <!-- skipped unless dep1 or dep2 change -->
</div>

빈 배열

빈 배열 v-memo="[]"은 콘텐츠가 한 번만 렌더링되고 다시는 업데이트되지 않는다는 뜻입니다. 정적 콘텐츠를 한 번만 렌더링하는 것과 같습니다.

<div v-memo="[]">
  <!-- rendered once, never re-rendered -->
</div>

주요 사용 사례: v-for

v-memo를 사용하는 주된 이유는 매우 큰 목록입니다. v-for 안에 배치하면 각 행은 관련 데이터가 변경될 때만 다시 렌더링됩니다.

<div
  v-for="item in list"
  :key="item.id"
  v-memo="[item.id === selectedId]"
>
  ...
</div>

선택된 행 메모이제이션하기

전형적인 예에서는 수천 개의 행이 선택 상태가 바뀔 때만 다시 렌더링됩니다. item.id === selectedId를 비교하면 행은 선택되거나 선택이 해제될 때만 업데이트됩니다.

<tr
  v-for="item in items"
  :key="item.id"
  v-memo="[item.id === selectedId]"
>
  <td :class="{ active: item.id === selectedId }">
    {{ item.name }}
  </td>
</tr>

모든 반응형 종속성 나열하기

하위 트리가 의존하는 모든 반응형 값을 포함해야 합니다. 하나라도 빠뜨리면 해당 값이 변경될 때 요소가 업데이트되지 않아 오래된 화면이 남는 미묘한 버그가 발생합니다.

<!-- WRONG: name can change but is not listed -->
<div v-memo="[item.id]">{{ item.name }}</div>

v-if와 결합하지 않기

v-memo를 v-if 또는 v-for의 구조 지시문과 충돌하는 방식으로 같은 요소에 배치하지 마세요. 특히 같은 요소에 v-memo와 v-if를 함께 사용하는 것은 지원되지 않으며 동작이 정의되지 않습니다.

<!-- AVOID -->
<div v-memo="[a]" v-if="show">...</div>

v-memo와 computed 비교

computed는 반응형 상태에서 파생된 값을 캐시합니다. v-memo는 렌더링된 가상 노드를 캐시합니다. 두 기능은 서로 다른 문제를 해결합니다. computed는 데이터 재계산을 줄이고, v-memo는 마크업 재렌더링을 줄입니다.

computed만으로 충분한 경우

병목이 데이터 재계산(필터링, 정렬, 형식 지정)이라면 먼저 computed를 사용하세요. 더 단순하고 잘못 사용하기도 어렵습니다.

import { computed } from "vue";

const sorted = computed(() =>
  [...items.value].sort((a, b) => a.rank - b.rank)
);

v-memo가 도움이 되는 경우

프로파일링 결과 큰 목록의 재렌더링이 대부분의 시간을 차지하고 업데이트 사이에 변경되지 않는 행이 많을 때만 v-memo를 사용하세요.

먼저 측정하기

v-memo는 메모리 오버헤드와 비교 비용을 추가합니다. 작은 목록에서는 일반 렌더링보다 느릴 수 있습니다. 실제 성능 향상이 있는지 확인하려면 사용 전후에 항상 프로파일링하세요.

빠른 확인

v-memo는 언제 적절한 도구인가요?

복습

v-memo="[deps]"는 나열된 모든 종속성이 변경되지 않는 동안 하위 트리의 재렌더링을 건너뜁니다. 따라서 큰 v-for 목록 안에서 사용하기에 적합합니다. 모든 반응형 종속성을 나열하고, 같은 요소에서 v-if와 결합하지 마세요. 파생 값에는 computed를 우선 사용하고, 실제 성능 향상이 있는지 확인하려면 항상 프로파일링하세요.

자주 묻는 질문

“템플릿 메모이제이션을 위한 v-memo” 강의는 무료인가요?

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

“템플릿 메모이제이션을 위한 v-memo”에서 뭘 배우나요?

v-memo 디렉티브, 의존성 배열, 다시 렌더링을 건너뛰는 경우와 computed와의 차이를 다룹니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

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

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

“템플릿 메모이제이션을 위한 v-memo” 강의는 얼마나 걸리나요?

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

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

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

이 강의의 모든 강의

← Vue Academy(으)로 돌아가기