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

현재 제 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

되어있어서 들어가봤는데 이해가 정확히 안됩니다.. 복습차 다시 들으면서 하는데 원래 없었던 에러가 발생하네요.

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