next.js 특정 페이지에 컴포넌트 미출력 기능 구현 이슈(use client 사용)

Question

로그인페이지(/user-page)에서 footer컴포넌트를 안띄우는 기능을 구현하고 싶어 footer 컴포넌트를 csr 방식으로 사용하도록 use client 줬습니다. 근데 error ReferenceError: window is not defined 라는 에러가 뜨면서 적용이 안되네요ㅠㅠ nextjs는 ssr이니까 window에 접근하기 위해선 use client를 주면 된다고 들었는데 왜 안되는걸까요?? 찾아보니까 useEffect 쓰라해서 useEffect도 써봤는데 에러가 뜨진않지만 여전히 적용안되더라구요. 문제점 알려주시면 감사하겠습니다ㅠㅠㅠ use client import React, { useEffect } from react import style from ../styles/footer.module.scss const Footer = () => { if (window.location.pathname === /user-page) return null return ( -생략- ) } <루트 layout.tsx 파일> use client export default function RootLayout({ children, }: { children: React.ReactNode }) { return (

{children}

) }

아발란체 · Answer

footer가 필요한 도메인들의 그룹 최상위 레이아웃에 Footer 컴포넌트를 넣고 
로그인페이지 레이아웃에는 안넣으면 되지않을까요??
Rootlayout에는 Footer를 넣지말구영
참고로 Rootlayout 파일은 왠만하면 서버컴포넌트를 유지하는것을 추천드립니다.

최진 · Answer

okky에도 동일한 질문 올리셨던데 답변드렸습니다.

Ed · Answer

usePathname 훅 사용하시면 됩니다.

https://nextjs.org/docs/app/api-reference/functions/use-pathname

해당 오류가 발생하는 이유는 랜더링 시점과 관련이 있을거 같은데 함수의 선언시점에는 브라우저의 window 객체에 참조가 불가능해서 일겁니다.