[React] Redux Tookit 설치

 

 

 

Redux

Redux는 props 없이 state를 공유할 수 있게 도와주는 라이브러리.

이미지 출처 코딩애플

 

js 파일 하나에 state를 보관할 수 있는데, 그걸 모든 컴포넌트가 직접 꺼내 사용할 수 있다.

props 전송이 필요 없어지고 컴포넌트가 많아질수록 사용하기 좋다.

사이트가 커지면 필수로 사용할 수밖에 없다.

 

 

Redux 설치

npm install @reduxjs/toolkit@1.8.1 react-redux

터미널을 열어 설치 명령어를 입력해 준다.

(redux toolkit은 redux의 개선 버전, redux에 비해 문법이 조금 더 쉬움)

*설치하기 전에 package.json 파일에서 "react", "react-dom" 두 항목의 버전이 18.1.x 이상이어야 사용 가능하다.

Redux 세팅

1. store.js 파일을 만들어 아래 코드를 작성한다.

(store.js)

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
})

store.js은 state들을 보관하는 파일이다.

2. index.js에 Provider 컴포넌트와 store.js 파일을 import 해서 감싸준다.

(index.js)

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라는 컴포넌트와 위에서 작성한 store.js 파일을 import 한다.

그리고 아래에 <Provider store={store}>로 <App/>을 감싸면 된다.

(참고) store={store}로 하였는데 위에서import로 받아온 store.js를 store이라는 변수에 넣었기 때문. 다른 이름으로 작명했다면 다른 것으로 넣으면 됨. store={import해 온 것을 받은 변수}

 

그럼 이제 <App>과 그 모든 자식 컴포넌트들은 store.js에 있던 state를 마음대로 꺼내 쓸 수 있다.

 

 

 

 

 

 

* 이 포스팅은 코딩애플 강의를 토대로 작성하였습니다.