template.tsx 템플릿은 각 하위 레이아웃 또는 페이지를 래핑한다는 점에서 레이아웃과 유사하다. 사용자가 템플릿을 공유하는 경로 사이를 탐색할 때 컴포넌트의 새 인스턴스가 마운트되고, DOM 요소가 다시 생성되며, 상태가 유지되지 않고, 효과가 다시 동기화된다. useEffect(ex: 페이지 보기 로깅) 및 useState(ex: 페이지별 피드백 양식) 에 의존하는 기능은 template가 적합하다. 💡 layout과 template는 공존해서는 안된다. 둘 중 하나를 택하도록 하자. layout.tsx의 경우 라우팅간에 리렌더되지 않지만, template.tsx는 컴포넌트가 새로 마운트되므로 특정 동작이 필요할 경우 채용한다. 는 HTML 요소를 확장한 route 간 prefetching 및 ..
zerocho
app router 라우팅 처리될 페이지들이 포함될 디렉토리 파일 시스템 기반으로 라우팅 처리 자동 코드 스플리팅 수행(번들 사이즈 down 효과) 💡 path alias 경로 별칭 설정 가능 (next.js는 기본적으로 @으로 설정됨) 상대 경로 ex) ../../app/layout 절대 경로 ex) @/app/layout 브라우저 주소 app 폴더에 반영하기 layout.tsx 여러 페이지간에 공유되는 UI (Navbar, header, footer 등 공통적으로 표현될 UI) 레이아웃은 중첩될 수 있다. (루트 레이아웃 -> 특정 레이아웃 -> 특정 페이지) children prop으로 페이지 또는 중첩 레이아웃을 전달받는다. export default function DashboardLayout(..
