템플릿은 레이아웃과 유사하게 각 자식 레이아웃이나 페이지를 감싸는 역할을 합니다. 그러나 레이아웃과는 다르게 템플릿은 탐색할 때마다 자식 요소마다 새로운 인스턴스를 생성합니다. 이는 사용자가 템플릿을 공유하는 라우트 간에 이동할 때 컴포넌트의 새로운 인스턴스가 마운트되고, DOM 요소가 다시 생성되며, 상태가 보존되지 않고 효과가 다시 동기화된다는 것을 의미합니다.
아래와 같이 일부 특정 동작이 필요한 경우에는 레이아웃보다 템플릿이 더 적합한 옵션이 될 수 있습니다.
- Enter/exit animations using CSS or animation libraries: 템플릿을 사용하여 CSS 또는 애니메이션 라이브러리를 활용한 입/출입 애니메이션을 구현할 수 있습니다. 예를 들어, 페이지 간 전환 시 페이드 인/아웃 효과나 슬라이드 애니메이션 등을 적용할 수 있습니다.
- Features that rely on useEffect and useState: useEffect나 useState에 의존하는 기능을 구현해야 하는 경우 템플릿을 사용할 수 있습니다. 예를 들어, 각 페이지의 조회 기록을 로깅하거나 페이지별 피드백 양식을 제공하는 등의 기능을 템플릿 내에서 관리할 수 있습니다.
- Changing the default framework behavior: 기본 프레임워크 동작을 변경해야 하는 경우에도 템플릿을 사용할 수 있습니다. 예를 들어, 레이아웃 내의 Suspense 경계는 처음 로드될 때만 대체 콘텐츠를 표시하고, 페이지를 전환할 때는 표시하지 않습니다. 그러나 템플릿을 사용하면 각 탐색마다 대체 콘텐츠가 표시되도록 설정할 수 있습니다. 이를 통해 특정 탐색에서 로딩 상태를 보여주거나 추가적인 로딩 처리를 할 수 있습니다.
💡권장 사항: 템플릿을 사용해야 하는 특별한 이유가 없다면 레이아웃을 사용하는 것이 좋습니다.
템플릿은 template.js 파일에서 기본 React 컴포넌트를 내보내서 정의할 수 있습니다. templage 컴포넌트는 중첩된 세그먼트가 될 children props를 내재해야 합니다.
잠깐 페이지내에서 마지막에 보여주고 다른페이지에서는 안보여주고 이런 부분이있다면..사용하는건가? 아직 어디에 사용해야할지 감이 안잡혀서 ㅠ ㅠ일단 블로그에 적어봅ㄴ디ㅏ..
