이번에 Next.js Page Router를 공부하면서 재밌는것을 알게 되어서 더 자세히 공부하고자 정리를 해볼려고합니다.
오늘의 주인공 : getLayout()
일단 getLayout을 언제 사용하고, 어떤 이유로 사용하는지 한번 알아봐야합니다. (이것은 app router가 아닌!!! page router 기준 입니다)
📌 첫번째 Point (여러개의 레이아웃)
우리가 예를 들어, 4개의 페이지와 3개의 레이아웃이 있다고 가정해봅시다. (실습을 위한 단순 예시입니다.)
당연히 프로젝트의 규모가 커질수록 레이아웃 관리는 더 중요하게 작용합니다.
- Home (1번째 레이아웃 적용 희망)
- Search (1번째 레이아웃 적용 희망)
- Book (2번째 레이아웃 적용 희망)
- BookName (3번째 레이아웃 적용 희망)
🤔 여러분이라면 어떻게 처리하실 생각이신가요?
첫번째 방법. 각 페이지에서 레이아웃을 적용하는 방식 (❌)
가장 간단한 방식이지만, 대형 프로젝트에서는 비효율적이고 관리하기 어려운 방법입니다.
간단한 프로젝트에서는 적용할 수 있지만, 페이지가 많아지면 코드 중복과 유지보수가 매우 어려워집니다.
📁 pages/home.tsx
📁 pages/book.tsx
🚨 문제점:
중복 코드: 각 페이지에서 Layout을 직접 적용해야 하기 때문에 코드 중복이 발생합니다.
유지보수 어려움: 페이지가 많아지면 레이아웃 변경이 필요할 때마다 각 페이지에서 일일이 수정해야 하므로 유지보수가 어렵습니다.
이러한 이유로 저는 첫번째 방법은 비추천합니다.
두번째 방법. 조건을 통한 레이아웃 처리
이 방법은 _app.tsx에서 특정 조건에 맞는 레이아웃을 동적으로 적용하는 방식입니다.
이 방법은 조건에 따라 레이아웃을 유연하게 적용할 수 있지만, 조건이 많아지면 코드가 복잡해지고 유지보수가 어려워질 수 있습니다.
즉, _app.tsx에 복잡성을 높이는 방식입니다.
📁 pages/_app.tsx
🚨 문제점:
조건에 따른 레이아웃 적용은 유연성을 제공하지만, 페이지가 많아지면 조건이 많아지고 앱의 구조가 복잡해집니다.
세번째. getLayout() 사용
이 방법은 getLayout()을 사용하여 페이지별로 레이아웃을 설정하는 방식입니다.
이 방식은 프로젝트 규모가 커질수록 가장 유연하고 효율적이라고 생각을 합니다.
📁 pages/about.tsx
📁 pages/_app.tsx
🌼 장점:
유연성: 각 페이지에서 getLayout을 사용하여 동적으로 레이아웃을 변경할 수 있어 유연한 코드 작성이 가능합니다.
관리 효율 증가: getLayout을 통해 레이아웃을 한 곳에서 관리할 수 있어, 유지보수와 관리가 용이하다고 생각합니다.
일관성: 모든 페이지에서 일관된 방식으로 레이아웃을 관리할 수 있습니다.
👋🏻 정리
위에서 제가 정리한 내용을 보면 무조건 getLayout이 최고라고 느껴질 수 있습니다. 하지만 저는 그게 아니라, 프로젝트의 상황에 맞춰 적절한 방식을 선택하는 것이 중요하다고 생각합니다.
저는 주로 두 가지 방법인 _app.tsx에서 조건으로 처리와 getLayout()을 조합해서 사용하려고 합니다.
이렇게 생각하는 이유는 두 가지 포인트 때문입니다.
첫번째 포인트. 관리 분산과 가독성의 연결관계를 생각하자.
프로젝트에서 레이아웃 변경이 자주 발생하지 않는 경우에는 _app.tsx에서 조건으로 처리하는 것이 더 유리할 수 있습니다.
_app.tsx에 모든 레이아웃을 모아서 관리하면, 레이아웃을 한 곳에서 관리할 수 있기 때문에 가독성이 훨씬 높습니다.
따라서 레이아웃이 고정적이고 변경사항이 적은 경우다!하면 _app.tsx에서 조건으로 처리하는 방식을 추천합니다.
하지만 레이아웃 변경이 잦거나 다양한 레이아웃을 관리해야 할 경우다! 라고 하신다면 _app.tsx에 모든 레이아웃을 몰아넣는 방식은 복잡도를 높이고 유지보수를 어렵게 만들 수 있습니다.
이럴 때는 getLayout()을 사용하여 각 페이지별로 독립적으로 관리하는 것을 추천합니다.
두번째 포인트. 레이아웃의 유연성의 한계
getLayout()을 쓰는 이유중 하나는 유연합니다. 프로젝트 세팅 과정에서 구조를 잘 짜는것이 중요합니다. 유연하게 레이아웃이 존재한 프로젝트라면 getLayout을 통해 진행하는것이 추후 변경할 일 없습니다.
찐결론
getLayout():
페이지별로 유연한 레이아웃이 필요한 경우와 _app.tsx의 복잡성을 줄이고 싶을 때, getLayout()을 사용하는 것을 추천합니다.
_app.tsx에서 레이아웃 처리:
레이아웃이 고정적이거나 간단한 경우, 복잡한 관리 없이 빠르게 설정하고자 할 때는 _app.tsx에서 조건을 통해 레이아웃을 처리하는 방식을 추천합니다.
