Redux

boraborayoon·2021년 11월 2일
0

TIL

목록 보기
45/72

1. Redux란

  • Redux는 Recuder와 Flux를 합친말이다.
  • Redux는 React없이도 사용할 수 있는, 상태 관련 라이브러리이다.
  • Redux를 배우는 이유는 컴포넌트와 상태를 분리하기 위함이다. 그동안에는 상태를 다루기 위해 컴포넌트 안에서 상태 변경 로직이 복잡하게 얽혀있는 경우가 많았다. 그러나 상태 변경 로직을 컴포넌트로부터 분리하면, 표현에 집중한 보다 단순한 함수 컴포넌트로 만들 수 있게 된다.

2. Redux의 3가지 원칙 🤟🏼

  1. Single source of truth : 동일한 데이터는 항상 같은 곳에서 데이터를 가지고 온다. 데이터를 저장하는 스토어는 한 곳 뿐이어야한다. ➡️ Store
  2. States is read-only : redux에서는 action으로 상태를 변경할 수 있다. ➡️ Action
  3. Changes are made with pure functions : 변경은 순수함수로만 가능하다 ➡️ Reducer

3. 🤟🏼 3가지 원칙 적용하기

  1. Store: 상태가 관리되는 오직 하나의 공간이다. 컴포넌트와는 별개로 store라는 공간에 앱에서 필요한 state를 두고 컴포넌트들에서 state가 필요할 때, store에 접근해서 state를 가져올 수 있다.

  2. Action: 자바스크립트 객체이다. Store에게 우리 application의 data를 운반하는 역할을 한다. type은 무조건 정해주어야한다.

  3. Reducer : 현재 상태와 Action을 이용해 다음 상태를 만들어 낸다. Action 객체는 Dispatch라는 메소드에 전달되고, Dispatch는 Reducer를 호출해서 새로운 state 생성한다. Store에는 현재의 state가 있을 것이고, 현재 상태와 action을 이용하여 새로운 new state를 만들수 있다.

4. Redux의 기본개념

5. Redux의 장점

  • 상태를 예측 가능하게 만들어준다. Reducer는 순수함수이기 때문에!
  • 유지보수에 용이하다.
  • 디버깅에 유리하다.(action과 state log 기록 시)
  • 테스트를 붙이기 쉽다.
profile
다시 보면, 더 많은 것들이 보인다.

0개의 댓글