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

Question

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}>시작하기 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 /> } ); }; export default Home; 가이드 화면에서 시작하기 버튼을 눌러서 쿠키가 등록 된뒤에 새로고침을 했을 때 쿠키가 있으니까 mainpage로는 넘어가지는데 위의 에러가 발생합니다. 쿠키 라이브러리는 react-cookie를 사용하였습니다

제로초(조현영) · Answer

에러는 아니고 그냥 경고입니다. 서버쪽에서 내려보낸 것과 프론트에서 렌더링되는 게 달라서 그렇습니다. cookie 때문이긴 한데 사실 해결하기 어렵습니다.