현재 리액트로 다른 프로젝트를 하면서 아래 에러가 나는데 어떻게 ... - 인프런

error문구

react-dom.development.js?61bb:67 Warning: Text content did not match. Server: "가이드 페이지입니다 ~" Client: "홈 화면 입니다"

------

맨 처음 접속할 때 쿠키값을 가지고 guideLine을 읽었으면 메인페이지로 가고 읽지 않았으면 가이드라인 페이지로 가는 상황입니다.

Guide 페이지에서 시작하기 버튼을 누르면 쿠키에 넣고

const [cookies, setCookie] = useCookies();

const onClickJumpStartButton = useCallback(() => {
const day = 2000;
setCookie('checkGuideLine', 'checked', { maxAge: day * 24 * 60 * 60 * 1000 });
}, []);

<SwiperJumpStartButton type="button" onClick={onClickJumpStartButton}>시작하기</SwiperJumpStartButton>

index.js에서 쿠키가 있으면 mainpage, 없으면 guide 화면을 보여줍니다.

import React from 'react';
import { useCookies } from 'react-cookie';

import Guide from '../components/MainPage/Guide';
import MainPage from '../components/MainPage/Home';

const Home = () => {
const [cookies] = useCookies();

return (
<div>
{
cookies.checkGuideLine === 'checked' ? <MainPage /> : <Guide />
}
</div>
);
};

export default Home;

가이드 화면에서 시작하기 버튼을 눌러서 쿠키가 등록 된뒤에

새로고침을 했을 때 쿠키가 있으니까 mainpage로는 넘어가지는데

위의 에러가 발생합니다.

쿠키 라이브러리는 react-cookie를 사용하였습니다

인프런 커뮤니티 질문&답변

현재 리액트로 다른 프로젝트를 하면서 아래 에러가 나는데 어떻게 해결해야할까요?