반응형
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
Tags
- 선택자
- rendering
- JavaScript
- csr
- svelte
- TLS
- caching
- vue-cli
- import.meta.env
- SSR
- Testing
- http3
- api test
- CloudFlare
- custom command
- ts error
- ViTE
- 비동기
- QUIC
- https
- devtools
- web vital
- msw
- Cypress
- e2e
- typeScript
- vue
- vue3
- aws
- CSS
Archives
- Today
- Total
목록동적 컴포넌트 (1)
Develop Note by J.S.
[Vue3] Keep-Alive (비활성 컴포넌트 캐싱)
1. Keep-Alive 동적 Component 는 컴포넌트의 동적 렌더링이 필요할 때 많이 사용되고 있습니다. 하지만 활성화 된 컴포넌트에서 다른 컴포넌트로 전환 하였을 때 기존 컴포넌트의 Unmount와 동시에 데이터가 모두 소멸되는데, 다시 해당 컴포넌트로 돌아갔을 때, 이전 작업했던 내용을 유지하고자 할 때 Keep-Alive 기능을 사용합니다. 2. Include / Exclude 기본적으로 KeepAlive는 모든 컴포넌트에 대하여 캐시를 생성합니다. Include / Exclude 옵션으로 캐시로 관리할 특정 컴포넌트만 지정할 수 있습니다. 3. Vue-Router에서 Children으로 속한 Path 별 Component의 렌더링 시에는 아래와 같은 방법으로 캐싱이 가능합니다.
FrontEnd/Vue3
2023. 7. 28. 15:12