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}

) }

rezigrene · Answer

/user-page 폴더 아래에Footer 가 빠진 layout.tsx 를 넣어보시는건 어떨까요?

sjdowk · Answer

페이지 최상단에 import {usePathname} from 'next/navigation'해보세요. 그리고 React Functional component 안에서 const pathname = usePathname; 하고 콘솔찍어보세요. 아마 값이 나올겁니다. window 에러는 next에선 window객체가 존재하는지 안하는지 예측할 수 없기때문에 window라는 객체를 접근할려면 window객체를 확인하는 절차를 밟아야합니다. 사실 넥스트를 쓰면서 window객체를 다루는 일은 드물어요. 넥스트 자체 내장 훅들이 다 존재하기때문에 그냥 html식으로 만들면 안됩니다.

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

2개의 답변

Q&A 목록