프로젝트를 하면서 고민점들 (라우팅 렌더링)

페이지 이동시 리렌더링이 발생하는 문제

• 🧐 개발 중 헤더의 li를 클릭하면 링크는 잘 이동되지만, active 표시가 되지 않는 문제가 발생했다. 

• 🔍 이유가 뭘까 state가 왜 초기화 되는지 찾아보자 
• 우선 가설을 세웠다. 
  • 라우팅이 된 후 active가 안되는 것이니 Next.js의 문제인가 
  • 그래서 Header의 라우팅이 현재 어떻게 되었는지 찾아보자 
• app/
  ├── layout.tsx
  ├── page.tsx
  ├── _components/
   │   ├── Header/
   │   │   └── Header.tsx
   │   └── layout/
   │       └── LayoutProvider.tsx
  └── globals.css
• 현재 나의 헤더는 layout에 LayoutProvider 컴포넌트를 감싸서 페이지 마다 다른 레이아웃을 적용시키기 위해서 분리 했다 
• 현재 나는 LayoutProvider를 Server Component로 했다. Next.js를 찾아보니 Segment 단위 서버 렌더링을 한다고 한다. 이게 원인거 같다. 
• Segment는 단위 서버 렌더링은 경로 이동 ex) / -> /about 으로 이동하면 서버 컴포넌트를 새로 렌더링해서 스트리밍을 한다고 한다.
• 이로 인해 경로 이동을 하게 되면 서버 컴포넌트안에 Header가 있기 때문에 리 렌더링이 되는 것 같다. 

 

해결방안 

• 간단한 방안은 usePathname()을 사용하는 것이다. 
• 변경 전 코드는 li를 클릭하면 setStatus로 이름을 넣어 업데이트 시켜 그와 일치하면 스타일을 주는 것을 만들었었다. 

const [status, setStatus] = useState("default");
const handleStatus = (name: string, href: string) => {
  setStatus(name);
  if (name === "사부작 게시판") {
    setIsOpen(true);
  } else {
    setIsOpen(false);
  }
  if (href) {
    router.push(href);
  }
};

<li
  key={item.id}
  onClick={() => handleStatus(item.name, item.href)}
  className={
    status === item.name
      ? styles.navLinkItemLinkActive
      : styles.navLinkItemLink
  }
>
  {item.name}
</li>

 

💡 usePathname
- usePathname은 현재 URL 경로를 읽는 클라이언트 전용 훅이다. 
- usePathname은 클라이언트 쪽에서 관리를 하기 때문에, 페이지 이동시 리렌더링이 발생은 하지만, 컴포넌트 자체가 다시 생성은 되지 않아 위의 문제점을 해결할 수 있다. 

 

💡 다른 해결 방안

client component로 ?? 

• 뭔가 가장 먼저 떠오른 방법은 LayoutProvider.tsx를 client 컴포넌트로 변경하는 방법이 떠올랐다. Segment 단위 서버 렌더링을 한다고 했으니 그러면 client 컴포넌트로 변경한다면 리렌더링만 발생하지 않을까 고민이 되었다. 
• ⚠️근데 주의사항이 있었다. 현재 경로가 components / layout 폴더 안에 LayoutProvider가 있기 때문에, 클라이언트 컴포넌트로 바꾼다고 해서 app 라우팅 계층이 아니라 단순 Import 된 컴포넌트로 처리를 한다는 것이다. 
• 이를 해결하기 위해서는 LayoutProvider를 app 폴더 경로로 옮겨야 한다. 하지만 폴더구조를 맞추기 위해서 위 방법은 택하지 않도록 하였다

 

정리 

문제원인해결

 

페이지 이동 시 Header state 초기화	Segment 단위 서버 렌더링으로 LayoutProvider 재생성	usePathname() 사용
"use client"로도 해결 안 됨	_components 폴더는 라우트 계층 아님	LayoutProvider를 app 폴더로 이동 or Header를 root layout로 분리