에러 관련해서 질문드립니다.

Question

현재 제 depedencies 버전은 아래와 같습니다. 강의도중에 next-redux-wrapper 였나 특정 라이브러리 6버전인가 였던것같은데 버전때문에 문제가 생긴건가 싶어서 정확히 기억나지않아서 올립니다.. " dependencies " : { " @ant-design/icons " : " ^4.6.2 " , " antd " : " ^4.16.3 " , " next " : " ^10.2.3 " , " next-redux-wrapper " : " ^7.0.2 " , " prop-types " : " ^15.7.2 " , " react " : " ^17.0.2 " , " react-dom " : " ^17.0.2 " , " react-redux " : " ^7.2.4 " , " redux " : " ^4.1.0 " , " redux-devtools-extension " : " ^2.13.9 " , " styled-components " : " ^5.3.0 " }, 그리고 현재 저한테 발생하고있는 경고문은 아래와 같습니다. 4. WrappedApp created new store with withRedux(App) { initialState: undefined, initialStateFromGSPorGSSR: undefined } Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes. at Overflow (/Users/seungwon/Desktop/nextest/front/node_modules/rc-overflow/lib/Overflow.js:42:32) at InheritableContextProvider (/Users/seungwon/Desktop/nextest/front/node_modules/rc-menu/lib/context/MenuContext.js:39:23) at Menu (/Users/seungwon/Desktop/nextest/front/node_modules/rc-menu/lib/Menu.js:76:32) at InternalMenu (/Users/seungwon/Desktop/nextest/front/node_modules/antd/lib/menu/index.js:73:37) at Menu (/Users/seungwon/Desktop/nextest/front/node_modules/antd/lib/menu/index.js:165:37) at div at AppLayout (webpack-internal:///./components/AppLayout.js:36:3) at Home at App (webpack-internal:///./pages/_app.js:24:3) at Provider (/Users/seungwon/Desktop/nextest/front/node_modules/react-redux/lib/components/Provider.js:21:20) at withRedux(App) (/Users/seungwon/Desktop/nextest/front/node_modules/next-redux-wrapper/lib/index.js:207:40) at AppContainer (/Users/seungwon/Desktop/nextest/front/node_modules/next/dist/next-server/server/render.js:28:952) 일단 문제가 두가지인것같은데 초기값이 undefined이다. 4. WrappedApp created new store with withRedux(App) { initialState: undefined, initialStateFromGSPorGSSR: undefined } 강의에서 말했듯이 reducer 에 default 로 초기값 설정해주었습니다. import { HYDRATE } from ' next-redux-wrapper '; const initialState = { user : { isLoggedIn : false , user : null, }, post : { mainPosts : [] , }, }; export const logInAction = ( data ) => { return { type : ' LOG_IN ' , data , }; }; export const logOutAction = () => { return { type : ' LOG_OUT ' , }; }; const rootReducer = ( state = initialState , action ) => { switch ( action . type ) { case ' HYDRATE ' : console . log ( ' HYDRATE ' , action ) ; return { ... state , // use previous state ... action . payload , // apply delta from hydration }; case ' LOG_IN ' : return { ... state , user : { ... state . user , isLoggedIn : true , user : action . data , }, }; case ' LOG_OUT ' : return { ... state , user : { ... state . user , isLoggedIn : false , user : null, }, }; default : return state ; } }; export default rootReducer ; 그래도 해당 에러는 사라지지않네요.. redux-devtools 확인해봐도 동작하는데는 문제가 없는데 왜 저런 경고문이 발생하는걸까여? 그리고 그아래 Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. 이것도 해결해본다고 찾아봤는데 경고문에 링크로 https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85 되어있어서 들어가봤는데 이해가 정확히 안됩니다.. 복습차 다시 들으면서 하는데 원래 없었던 에러가 발생하네요.

제로초(조현영) · Answer

에러가 안 보이는데 에러가 뭔가요?? 매번 말씀드리지만 경고는 에러가 아닙니다.