[Redux] react-redux 사용시 Invalid hook call at Provider

redux를 사용하기 위해서 적용하던중,

import React from "react";
import ReactDOM from "react-dom";
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import RootReducer from './redux/RootReducer';
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import "./css/index.css";

const store = createStore(RootReducer,composeWithDevTools());
ReactDOM.render(
    <Provider store ={store}>
      <React.StrictMode>
		<App />
      </React.StrictMode>
    </Provider>
	,
  document.getElementById("root")
);

reportWebVitals();

ReactDOM.render 부분에 <Provider /> 를 추가했을 때, 아래와 같은 에러가 떴다.

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. 
This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

<Provider store={store}> , </Provider> 부분을 빼고 실행하면 정상적으로 작동하는 상황이었다.

나의 경우 해결법은 npm update 이었다.

해당 해결법이 적용되는 경우는

npm ls react

를 했을 때, 두개이상의 버젼의 리엑트가 존재한다면(나의 경우는 17.0.2, 16.x.x) npm update를 하면 된다. 그 이후 다시 npm ls react를 하면 모두 다 같은 버젼의 리액트로 표시되고 정상적으로 페이지가 작동했다.

관련하여 맨아래에 첨부하는 3개의 링크를 참조했다.

내가 이해한 바는 두가지의 가능성이 있는데, 

1. Rule of Hooks을 break해서 (Stack Overflow에서 제일 첫번쨰 답변)

제안하는 바 :

    const AppWrapper = ({ children }) => {
        const store = createStore(reducer);

        return (<Provider store={store}>{children}</Provider>);
    }

방법으로 Redux Provider를 Wrap하라고 제안했다.

2. Duplicated React (나의 경우가 해당)

제안하는 바 : 

1. npm ls react -> 리액트 버젼 여러개? -> npm update

2. npm uninstall 한 후, 다시 install

 

 

 

---------------------------------------------------------------------

https://reactjs.org/warnings/invalid-hook-call-warning.htmlhttps://reactjs.org/docs/hooks-rules.html

https://edu.goorm.io/qna/8612

https://stackoverflow.com/questions/60054730/error-invalid-hook-call-at-provider-while-using-react-redux