Redux

코비·2021년 4월 5일
0

Intro

리덕스는 스토어를 이용한 상태관리 라이브러리

리덕스는 자바스크립트앱에서 예측가능한 상태관리를 해주는 컨테이너

what is state? in react

  • 컴포넌트 내에서 관리하는 웹에서 필요한 상태들을 담아주는 공간
  • 형제 컴포넌트 간에 데이터를 주고 받을 때 부모 컴포넌트 통해 주고 받는다.
  • 이는 형제가 많을 때 상태관리가 복잡해지는 문제가 생긴다.

⇒ 복잡성을 줄이기 위해 상태관리 라이브러리 Redux를 활용

Redux의 세 가지 원칙

  1. Single source of truth
    • 동일한 데이터는 항상 같은 곳에서 데이터를 가져온다.
    • 데이터를 저장하는 store라는 하나뿐인 공간이 있다.
  2. State is read-only
    • action이라는 객체를 통해서 state를 변경할 수 있다.
  3. Changes are made with pure functions
    • reducer와 연결이 되는 개념

  1. Store
    • 상태가 관리되는 오직하나의 공간
    • 컴포넌트와 별개로 스토어라는 공간이 있다.
    • 스토어 안에 앱에서 필요한 state를 두고 컴포넌트들에서 state정보가 필요할 때 store에 접근해서 state정보를 가져올 수 있다.
  2. Action
    • 자바스크립트 객체
    • 객체안에 type을 비롯한 다양한 데이터가 담긴다.
    • 이 객체는 애플리케이션의 데이터를 스토어에 운반을 하는 역할을 한다.
  3. Reducer
    • Action객체가 Dispatch메소드에게 전달되고, Dispatch는 Reducer를 호출해서 새로운 state를 생성한다.
    • 한 방향으로 데이터가 흘러야 하기 때문에 이런 공식을 따른다.

Redux의 장점

  1. 상태를 예측가능하게 만들어 준다.
    • 리듀서는 순수함수라서 다음상태가 어떻게 될지 쉽게 예측을 할 수 있다.
  2. 유지보수에 용이하다.
  3. 디버깅에 유리하다(action과 state log기록 시)
    • action이 생겼을 때 어떤 일이 일어났는지 추적이 가능하다.
  4. 테스트를 붙이기 쉽다.
    • 순수함수를 사용하기 때문에

0개의 댓글