[React]react-redux 개념

이은지·2023년 11월 11일
0
post-thumbnail
post-custom-banner

1. React-Redux란?

  • React-Redux는 React용 공식 Redux UI 바인딩 라이브러리
  • 가장 많이 사용하는 상태 관리 라이브러리로 컴포넌트끼리 상태를 공유해야 할 때 여러 컴포넌트를 거치지 않고 쉽게 상태값을 전달하거나 업데이트할 수 있음

2. React-Redux를 사용해야 하는 이유

(1) 전역 상태 관리

  • 기존 리액트에서는 여러 컴포넌트에 걸쳐 있는 상태를 변화시키거나 기준이 되는 컴포넌트와 멀리 떨어진 컴포넌트 간의 데이터를 주고 받기 어려웠음
  • React-Redux 는 이런 문제를 해결하기 위해 중앙에서 Store를 통해 전역으로 상태를 관리해 여러 컴포넌트를 거치지 않고 바로 상태 값을 받을 수 있음

(2) props drilling

  • 하위 컴포넌트가 깊어지고 전달하는 컴포넌트가 많아질 수록 props를 추적하거나 유지보수 하기 어려워짐
  • React-Redux는 props drilling을 막고 멀리 떨어진 컴포넌트도 중앙 데이터 저장소 store에 직접 전달할 수 있음

3. Redux와 React-Redux API

🌻 Redux API

createStore : store 생성

combineReducer : 여러 개의 slice를 결합하여 하나의 root reducer 를 만든다.

🌻 React-Redux API

Provider - react app 전체에 제공할 store를 주입하는 컴포넌트

useSelector - store의 state에 접근하는 hook 입니다. useState의 state 처럼 활용

useDispatch - action을 reducer로 보내는 역할입니다. useState의 setState 처럼 씀

profile
소통하는 개발자가 꿈입니다!
post-custom-banner

0개의 댓글