[Redux] 대체 무엇인가! 왜 쓰는가?

---

Prop Drilling 문제를 겪다보니 리덕스의 필요성이 느껴져서 공부했다.

---

Redux 왜 필요해요...

App.js에서 Header 컴포넌트에 어떠한 상태를 넘겨주고 Header에서는 또 MyPage 컴포넌트에 넘겨주고...

그러다가 Content라는 컴포넌트에 Books 컴포넌트에서 Mypage의 컴포넌트 상태 중 어떤 것이 필요하다면...

 

 

이정도만 되어도 간단하게 타고 올라가서 다시 뚫고(?) 내려가겠지만..

깊이가 깊어질수록 불편하고, 헷갈리고... 

대체 state를 누가 관리할 것인가

 

상태관리를 보다 편리하게 해주는 리덕스 라이브러리 이야기는 여러번 들었지만, 필요성을 느끼지 못하고 있었다.

프로젝트를 진행하며 상태가 복잡해지니 그것이 무엇인지 경험이나 해보고 싶어져서 들여다 보았다.

 

리덕스의 기본 개념: 세가지 원칙

- Single source of truth : StoreAction
- State is read-only : Action(javascript의 순수 객체)
- Changes are made with pure functions : Reducer

 

기본적인 작동 원리는  Action을 Store에 보내고 Action을 Reducer라는 순수 함수로

변화를 만들고 그 변화를 다음 State로 보낸다.

 

Store -> 상태가 관리되는 오직 하나의 공간으로 외부에 존재한다. 그래서 깊이 있는 컴포넌트더라도 부모까지 타고 올라가지 않아도 된다는게 핵심!

 

Action은 Sipmle JavaScript Object로 주문서 같은 느낌이라고 한다.

{
  type:  "ORDER",
  drink: {
     menu: "Americano",
     size: "Grande",
     iced: false
  }
}

현재 상태와 Action을 이용해 다음 상태를 만들어냄

Pure function이라 순수하게 State와 Action을 이용하여 다음 State를 만들어냄

Action + Reducer = Next State

 

장점은 무엇이 있는가

- 상태를 예측 가능하게 만든다. 

- 유지보수: 친척 컴포넌트에 props를 일일이 뚫어서 사용하지 않아도 된다.

- 디버깅에 유리하다(Action과 State 로그 기록을 통해서)

- 순수 함수기에 테스트를 붙이기 쉽다.

 

---

예제와 실습, 그리고 프로젝트에 직접 적용해보면서 내가 직접 느낀 장점에 대해 정리해봐야겠다!