[React_study] Redux & Redux Toolkit 셋팅 및 사용

* Redux

• Redux는 props 없이 state를 공유할 수 있게 도와주는 라이브러리
• js파일 하나에 state들을 보관할 수 있다.
• 모든 컴포넌트가 직접 꺼내어 사용할 수 있다.
• props전송을 안해도 된다.

* Redux 설치

npm install @reduxjs/toolkit react-redux

• redux toolkit이라는 라이브러리를 설치
• redux의 개선버전이다.
• "react", "react-dom"의 버전이 18.1.x 이상이면 사용 가능하다.

* Redux 셋팅

• src폴더안에 store폴더를 만들고 store.js파일을 만들어준다.
• 아래의 코드를 작성

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
}) 

import { Provider } from "react-redux";
import store from './store.js'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </React.StrictMode>
); 

• index.js 파일가서 Provider 라는 컴포넌트와 아까 작성한 파일을 import 해온다.
• <Provider store={import해온내용} 이걸로 <App/>을 감싸주면된다.
• 그러면 <App>과 모든 자식 컴포넌트들은 store.js에 있던 state를 마음대로 꺼내서 사용할 수 있다.