728x90
나는 동아리에서 next를 이용하여 프로젝트를 한 경험이 있다.
분명, next로 로그인 관련해서 만들어볼 때 쿠키 값을 이용해본적이 있지만,
해당 프로젝트를 진행할 적에, 내가 정말 많이 부족한 상태였고 첫 프로젝트였기 때문에 다른 개발자분께서 세팅을 많이 해주셨다.
그래서, 이번에 회사에서 React로 이루어진 프로젝트를 Next로 마이그레이션 작업을 진행하면서
다른 팀원 개발자분의 Next 보일러플레이트에 리액트 프로젝트를 라우트별로 페이지화를 먼저 진행하였다.
하지만, 이 부분에서 react에서는 변수로 cookie값을 가지고 오면, 바로 사용할 수 있었다. (코드 참고)
아래 코드의 쿠키는 react-cookie를 이용해도 되고, dom에서 직접 cookie의 값을 가지고오도록 설정해줘도 된다.
ex)
const cookie = getCookie('id')
...
return {
cookie === '1' && <>cookie가 '1'일 때 나오는 코드</>
}
하지만, Next에서는 위와 같이 사용을 하면 cookie값에 접근을 하지 못하는 오류가 발생한다.
Next는 ServerSideRendering 방식으로, csr과 ssr에서의 쿠키 값이 다른 문제가 발생한다는 에러이다.
이 부분에서는 next에서는 아래처럼 사용을 해야한다.
import { useEffect, useState } from 'react';
const 컴포넌트명 = () => {
const [cookie, setCookie] = useState<string>('');
useEffect(()=>{
const
},[]) // 첫 렌더링 시 setState를 해주어야한다.
return {
{cookie === '1' &&
<>
cookie가 '1'일 때 나오는 코드
</>
}
}
}
위와 같이 useState를 이용하여 useEffect에서 첫 렌더링일 때 setState를 해주어야한다
참고문서
https://davidhwang.netlify.app/TIL/(0320)nextjs에서-next-cookies-사용-이슈/
728x90