● v-memo 디렉티브로 렌더링 결과 저장하기
v-memo 디렉티브는 Vue 3.2 이상에서 사용할 수 있으며, 메모이제이션 기술로 <template> 태그의 구성 요소를 효율적으로 렌더링하고 싶을 때 사용합니다. 메모이제이션(memoization)이란 이전에 계산한 결과를 저장해 중복 계산을 피하고 실행 속도를 향상시키는 프로그래밍 기술입니다. <template> 태그에서 반복해서 렌더링되는 요소에 v-memo 디렉티브를 사용해 렌더링 결과를 저장하면 렌더링이 반복되는 것을 방지해 실행 속도를 향상할 수 있습니다.
TIP - 현재 뷰 애플리케이션의 뷰 버전을 확인하고 싶으면 package.json 파일에서 “vue” 속성의 값을 확인하면 됩니다.
v-memo 디렉티브는 다음 형식으로 사용합니다. v-memo 디렉티브에 할당된 조건을 하나라도 만족하면 v-memo 디렉티브가 사용된 요소를 다시 렌더링합니다.
형식
<태그 v-memo="[조건1, 조건2, …]"></태그>
다음 코드는 div 요소 안에 name, gender, age 데이터 속성을 출력합니다. 그리고 v-memo 디렉티브로 name과 gender 데이터 속성을 조건으로 걸었습니다.