디렉티브
디렉티브는 태그 내부에 v- 접두사가 있는 속성이다. 디렉티브는 컴포넌트에게 ~하게 작동하라고 지시하는 지시문이라고 생각하며 된다.
종류들
v-text, v-html
선언된 값을 문자열로 인식해라 라는 지시문
위에 사진 설명 참고
v-once
엘리먼트와 컴포넌트를 한번만 렌더링한다. 이후 재렌더링 할때, 해당 디렉티브가 있는 컴포넌트의 모든 하위 엘리먼트는 정적 컨텐츠로 처리하고 건너 뛴다. 성능 최적화를 할 수 있다.
마지막 p태그에만 v-once 설정을 넣어보자.
같은 반응형 msg이지만 다른 것들은 바뀌였지만, v-once가 들어간 것은 한 번만 바뀌었다.
v-memo 디렉티브
반응형 데이터만 값 변경을 허용하는 디렉티브,, (어디서 쓰지?)
코드 예제
단순하게 버튼을 누르면 숫자가 증가되도록 구현
•
다르게 테스트 해보기
위에는 v-memo에 아무것도 넣지 않았고,
아래에는 likes만 v-memo에 넣었다. 어떻게 될까???
여러번 눌렀지만, Sub, View는 변화가 없다가 Likes가 변화될 때 한꺼번에 값이 렌더링 되었다.
즉 같은 컴포넌트에 있는 반응형 요소들은 상태는 추적중이지만, 렌더링은 되지 않게 한다.
그리고 v-memo에 등록된 반응형 요소를 기준으로 잡고, 그 요소가 변경될 때만 모든 상태를 재렌더링하게 된다.
