[React] Redux 사용하는 이유 & 설치하기

applejin·2022년 10월 20일
0

React

목록 보기
2/3

Redux 왜 쓰지?

웹 페이지가 커질수록 props는 많아지고, 많아질 수록 state를 공유하기 복잡해진다.

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

Redux를 설치하면 js 파일 하나에 state들을 보관할 수 있다.
그 state들을 모든 컴포넌트가 직접 꺼낼 쓸 수 있게 된다.
따라서, 귀찮은 props 전송이 필요 없어진다는 것!!

설치하기

npm install @reduxjs/toolkit react-redux

redux toolkit이라는 라이브러리도 같이 설치해준다.
redux의 개선 버전이라고 보면 되는데 redux toolkit을 사용하면 문법이 좀 더 쉬워진다.

반드시 package.json 에서 "react" 와 "react-dom"의 버전이 모두 18.1.x 이상인지 확인한다. 해당 버전 이상에서만 사용 가능하다.

세팅하기

state들을 보관할 파일 하나를 생성한다.
나는 store.js 로 만들었다.

store.js

해당 파일에 다음과 같이 추가한다.

import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: { }
})

index.js

Provider 라는 컴포넌트와 이전에 만든 store.js를 import 해준다.
그리고, Provider 태그 속성으로 store={import 해온 이름}을 넣어주고 App 태그를 감싸주면 된다.

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>
); 

이렇게 세팅하면 이제 App과 그 모든 자식컴포넌트들은 store.js에 있던 state를 맘대로 꺼내 쓸 수 있다!!

👉🏽 참고

  • 코딩애플 온라인 'React 리액트 기초부터 쇼핑몰 프로젝트까지!'
profile
front-end developer

0개의 댓글