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

1년 전

로그인페이지(/user-page)에서 footer컴포넌트를 안띄우는 기능을 구현하고 싶어 footer 컴포넌트를 csr 방식으로 사용하도록 'use client' 줬습니다.
근데 error ReferenceError: window is not defined 라는 에러가 뜨면서 적용이 안되네요ㅠㅠ
nextjs는 ssr이니까 window에 접근하기 위해선 'use client'를 주면 된다고 들었는데 왜 안되는걸까요??
찾아보니까 useEffect 쓰라해서 useEffect도 써봤는데 에러가 뜨진않지만 여전히 적용안되더라구요.
문제점 알려주시면 감사하겠습니다ㅠㅠㅠ

```
<footer.tsx 파일>
'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 (  
       <html lang="ko">       
      <body className={inter.className}>               
  <div className="wrap bg-white">       
              <Header />            
        		 {children}                    
 				<Footer />            
  		 </div>             
	</body>        
 </html>     )
}
```

172

털먹는토끼

1년 전

댓글 2

닥터핸

Footer에서 useEffect를 어떻게 쓰셨는지 보여주시면 한번 확인해보겠습니다.

아래 코드는 useEffect를 사용한 Footer 코드이니 참고해보시기 바랍니다.

'use client'
import React, { useState, useEffect } from 'react';
import style from '../styles/footer.module.scss';

const Footer = () => {
    const [showFooter, setShowFooter] = useState(true);

    useEffect(() => {
        if (window.location.pathname === '/user-page') {
            setShowFooter(false);
        }
    }, []);
    
    if (!showFooter) return null;

    return (
        // 생략
    );
}

export default Footer;

참고로 RootLayout에서는 use client를 사용할 필요는 없을 것 같습니다. 그러면 해당 레이아웃 컴포넌트가 항상 클라이언트에서만 렌더링되도록 만들 것이므로, 필요한 경우에만 사용하는 것이 좋을 것 같습니다.

1년 전 ∙ 0 ∙ 답글 달기 ∙ 공유 ∙ 신고 ∙ 차단

털먹는토끼

@닥터핸 답변늦어서 죄송합니다. ueseffect 쓰지않고
import {usePathname} from 'next/navigation'

const pathname = usePathname()

if (pathname === '/user') return null

usePathname 훅 가져와서 사용하니까 해결됐어요!

제가 useeffect 사용했을땐 useeffect 훅 콜백함수 부분에 if문을 삽입했는데 그래서 안된건가 싶네요.
아무쪼록 답변 감사합니다! 기회되면 useeffect 도 써볼게요

1년 전 ∙ 0 ∙ 답글 달기 ∙ 공유 ∙ 신고 ∙ 차단

뎁스노트 앱으로 보시겠습니까?