[NEXTJS14] Navbar 조건부 렌더링하기

조건부로 Navbar 노출을 시켜야하는 상황이다.
여러가지를 생각해봤지만 아직까지 뭐가 가장 적절한 방법인지 확신을 못하는 상태....

방안 후보

1. pathname 사용

1-1. MainPageLayout(기존위치)에서 관리

MainPageLayout에서 pathname을 가져와 조건을 걸어 모든 페이지의 Nav를 관리한다

// Nav.tsx
...
const pathname = usePathname()

const blackList = [
  "/community",
  "/something",
  ...
]

  if (pathname.includes(blackList)) {
    return (null)
  } 
...
// 하위에는 nav 리턴코드

조건 자체는 더 복잡할 예정이지만 일단 간략하게 작성해봤다

1-2. Nav 컴포넌트 안에서 관리

Nav 컴포넌트 안에서 pathname을 가져와 조건을 걸어 모든 페이지의 Nav를 관리한다
방식자체는 위와 동일하다

하지만 여러가지 조건이 많이 붙으면 복잡해진다는 게 문제...

---

2. NestedLayout, Route group 사용

1. RootLayout(최상위)바로 하위 layout인 MainPageLayout(기존위치)에서 Nav를 제거

2. 각 탭(페이지)의 폴더마다 조건을 따라 layout.tsx를 생성, 각각 Nav바를 불러옴

3. 조건에 따라Route group을 활용해서 layout.tsx을 추가로 생성, Navbar유무를 나눠줌

하지만 이방법은 각 탭을 이동할 때마다 Nav바가 매번 렌더링되는 동작부터가 적절한 방법이 아닌거 같다

---

3. 전역 상태 관리

마지막으로 context api나 상태관리 라이브러리로 전역적으로 관리하는 방법이다
(꼭 recoil이 아니어도된다 현재 프로젝트에서 recoil을 쓰기 때문에 씀)

1. atom을 생성해주고

// showNavBarState.ts
import { atom } from "recoil";

export const showNavBarState = atom({
  key: "hideNavBarState",
  default: true,
});

2. Nav에서 설정하고

// Nav.tsx
const showNavbar = useRecoilValue(showNavBarState);

if (!showNavbar) {
  return null;
}

3. 해당 페이지마다 불러와서 상태변경

// 해당 페이지.tsx
  const setShowNavbar = useSetRecoilState(showNavBarState);
  setShowNavbar(false);

하지만 이러면 Navbar가 필요없는 페이지마다 코드 두줄을 추가해줘야한다.(이게맞..나?)

+코드에는 없지만 상위 레이아웃에 RecoilRoot를 씌워주는 작업도 필요함
그리고 이 과정에서 발생되는 문제(context와 use client)는 이 글을 보면 해결할 수 있다
https://velog.io/@pakxe/Next.js-Recoil을-Next.js-에서-사용하는-방법에-대한-고찰과-children-prop-pattern

---

중간 결론?

다 적용해보고 나니 2번은 정말 아닌거 같고(페이지가 바뀔 때마다 Navbar가 매번 새롭게 렌더링은 진짜 아닌거같다)
처음에 적용했던 1번으로 돌아가거나, 3번을 고려해보거나 할거같은데 아무래도 1번이 유력하지 않나 싶다

가장 적절한 방법을 혹시 누가 안다면 알려줬으면..

---

1번으로 결정했다