[Redux] Redux 란?

redux 는 간단하게 상태관리를 도와주는 라이브러리다.

 

기본적으로 React 에서는 자식컴포넌트 간의 직접적인 데이터 전달은 불가능하다. 

컴포넌트가 많아지면 상위에서 하위로 데이터를 보내줄 때 수많은 props 를 거쳐야 할텐데

이렇게 되면 상태관리가 굉장히 복잡 해지게 된다.

-> 이걸 Props drilling 이슈 라고 한다

 

Redux 를 사용하게 된다면 전역으로 상태를 관리해주는 저장소를 제공 받을 수 있다.

어디서든 저장소에 접근해 상태관리를 할 수 있다는 뜻이다!

 

Redux 기본 개념

 🧬  액션 (Action)

상태를 업데이트하는데 필요한 정보를 담은 객체다.

action 객체는 반드시 고유한 type 프로퍼티를 가져야하며, 이 값은 action 의 이름이다.

 

 🧬  액션 생성 함수 (Action Creator)

액션 객체를 반환하는 함수다. 액션 객체는 함수로 관리하며, 화살표 함수로도 표현 가능하다!

 

 🧬  리듀서 (Reducer)

현재 상태와 액션 객체를 인자로 받아 새로운 상태를 반환 (state 업데이트)하는 함수이다.

현재 상태를 받는 첫번째 인자에 초기 상태를 기본 인자로 설정한다.

 

 🧬  스토어 (Store)

상태가 들어있으며, 하나의 프로젝트는 하나의 스토어만 가질수 있다.

컴포넌트에서 상태 정보가 필요할 때 접근한다.

 

 🧬  디스패치 (Dispatch)

스토어의 내장함수이다. 상태를 업데이트하기 위해서는 꼭 디스패치 함수를 사용해야 한다.

액션 객체를 인자로 받아 리듀서 함수로 전달한다.

 

 🧬  구독 (Subscribe)

스토어의 내장함수이다. 리스너 함수를 파라미터로 넣어 호출하면 액션이 디스패치 되어 상태가 업데이트 될 때 마다 리스너 함수가 호출된다. 이벤트 리스너의 일종이다.

 

짚고 넘어가야하는 사항

가장 중요한 부분이다.

 

1. Redux 는 단일 스토어이다.

위에서 말했듯이 하나의 애플리케이션에는 하나의 스토어만 운영하는 것이 원칙이다.

 

2. Redux 는 읽기 전용이다.

상태는 오직 액션(Action) 을 통해서만 일으킬 수 있다.

상태를 변화시키는 의도/목적을 정확하게 표현하기 위함이고, 상태 변경에 대한 추적을 용이하게 하기 위함이다.

 

3. Reducer 는 순수 함수이어야 한다.

Reducer 함수는 현재 상태(state) 와 액션 객체(action) 을 인자로 받는다.

파라미터 외의 값에 의존하면 안된다.

이전 상태는 건들여서는 안되며, 변화를 준 새로운 상태 객체를 만들어 반환한다.

똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 값을 반환해야한다.

 

Redux 를 사용해야 하는 때는?

공식문서에서는 

- 앱의 여러 위치에서 필요한 많은 양의 상태들이 존재할 때

- 상태들이 자주 업데이트 될 때

- 상태를 업데이트 하는 로직이 복잡할 때

- 앱이 중간 또는 큰 사이즈의 코드를 갖고 있고 많은 사람들에 의해 코드가 관리될 때

- 상태가 업데이트되는 시점을 관찰할 필요가 있을 때

 

라고 한다.

 

하지만 리덕스는 스토어를 구성하는 것이 복잡하기도하고,

실제로 유용하게 사용하기 위해서는 많은 패키지들을 추가적으로 설치해야한다.

그리고 많은 보일러 플레이트 코드를 요구한다.

보일러 플레이트 코드? 최소한의 변경으로 여러곳에서 재사용되며, 반복적으로 비슷한 형태를 띄는 코드이다.

= 단순작업 해결!

 

현재 Redux 의 사용을 더 쉽게 만들어주는 Redux toolkit 이 출시되어 관련해 다음 포스팅으로 다루려고한다 ^v^