layout.tsx와 page.tsx 역할

 

layout.tsx

• 페이지를 감싸는 공통 레이아웃 컴포넌트
• 페이지 이동해도 유지 하도록 설계했어요.
• 헤더, 사이드바, 푸터, 전역 Toast, 이런 것들을 매번 페이지 이동할 때마다 새로 렌더링하면 비효율적이니까, layout은 한번만 마운트되고 재사용합니다.
• 즉, layout은 변하지 않는 틀처럼 작동.

page.tsx

• 실제로 라우트별로 보여줘야 할 내용
• 다른 페이지로 이동할 때는 현재 page.tsx를 언마운트하고, 새로운 page.tsx를 새로 마운트합니다.
• 이유는 페이지마다 보여줘야 할 내용이 다르기 때문이에요.

요약

🔹 layout.tsx : 페이지를 감싸는 고정 틀 (한 번 마운트되고 유지)

🔹 page.tsx : 페이지별 구체적 콘텐츠 (페이지 이동 시 언마운트 후 새로 마운트)