01. LayoutNext.js 14에서 Layout은 앱 전체 구조를 구성하는 중요한 요소로, 여러 페이지에서 공통적으로 사용되는 UI 요소를 한 번에 관리할 수 있게 해준다. 특히 Next.js의 App Router에서 레이아웃 기능이 강화되었으며, 페이지 간 전환시에도 지속적으로 유지되는 구조이다. #1. Navbar와 같은 공통된 Layout일반적으로 Navbar, Footer, 전역 스타일과 같은 요소들은 모든 페이지에서 공통적으로 적용되어야 한다. 하지만 이때 공통된 요소들을 모든 Page.tsx에 import하는 것은 매우 비효율적이다. 페이지 수가 적다면 어느정도는 가능하지만 만약 100페이지 이상된다면 해당 요소들을 모든 페이지에서 불러와야 하는 문제점이 발생한다. 이를 해결하기 위해 공..
Front-End/Next.js 2024. 10. 9. 23:29
01. LayoutNext.js 14에서 Layout은 앱 전체 구조를 구성하는 중요한 요소로, 여러 페이지에서 공통적으로 사용되는 UI 요소를 한 번에 관리할 수 있게 해준다. 특히 Next.js의 App Router에서 레이아웃 기능이 강화되었으며, 페이지 간 전환시에도 지속적으로 유지되는 구조이다. #1. Navbar와 같은 공통된 Layout일반적으로 Navbar, Footer, 전역 스타일과 같은 요소들은 모든 페이지에서 공통적으로 적용되어야 한다. 하지만 이때 공통된 요소들을 모든 Page.tsx에 import하는 것은 매우 비효율적이다. 페이지 수가 적다면 어느정도는 가능하지만 만약 100페이지 이상된다면 해당 요소들을 모든 페이지에서 불러와야 하는 문제점이 발생한다. 이를 해결하기 위해 공..