Redux

정혜지·2022년 10월 7일

Redux

React의 상태를 관리하는 라이브러리

redux

Redux Architecture

Redux Architecture

리액트의 단점

단방향 통신 -> 상태(state)관리 불편

부모에서 자식으로만 전달 가능! : 자식에서 부모로, 형제에서 형제로 통신 불가

-> 공통된 부모에서 state관리를 하기 때문에
구조가 복잡해질 수록 state관리가 불편하다 (공통된 부모에 state가 엄청난 양으로 쌓임)

단뱡향 통신의 단점정리
구조가 복잡할수록, 공통된 부모가 너무 커짐 -> props 남발

-> 단점 보완, Redux(리덕스)

state 관리

리덕스는 state를 저장해두는 저장소 역할을 수행한다.

각각의 컴포넌트들이 필요로 할 때마다 저장소(store)에 요청을 하고 저장소가 state를 전달해준다.

: 컴포넌트의 위치와 상관없이 store에 저장된 state를 가져다 쓸 수 있다.

그러나

컴포넌트가 store의 값을 바로 바꾸거나 요청하지 못함

Redux 데이터 흐름

Redux 데이터 흐름

  1. 컴포넌트에서 액션 제공 -> 행동 지시
    • ex) action : 로그인하기
  2. Reducer 함수는 action 캐치, 해당 내용에 맞게 store(저장소) 업데이트

리덕스를 사용하기 위하여 필요한 React HOOK

  • useDispatch : 액션 전달 함수
  • useSelector :
profile
오히려 좋아

0개의 댓글