리액트 리덕스를 간단하게 정리해보자

🐕 Redux

Redux는 상태관리 라이브러리이며 리액트에 종속되는 라이브러리가 아닙니다.

따라서 리액트 환경 뿐만 아니라 다양한 환경 심지어는 바닐라 자바스크립트에서도

리덕스를 사용할 수 있습니다.

 

리덕스는 하위 컴포넌트의 상태 공유를 위해서 상태 끌어올리기와 props drilling을 반복해야한다는

리액트의 구조에서 기인한 문제점을 해결해줍니다.

 

컴포넌트의 깊이가 깊지 않은 경우에는 props를 사용해서 상태를 내려주는 것도

상태 끌어올리기를 통해 서로 다른 하위 컴포넌트에서

사용해야 할 상태를 상위 컴포넌트에서 관리하는 것 또한 그리 귀찮지 않은 범위에서 가능하지만

 

구조의 복잡도가 심해지고 깊이가 깊어질수록 이런식의 데이터흐름은 복잡도가 올라갑니다.

어느정도의 시점까지는 필요한 상태를 최대한 가까운 상위 컴포넌트에 배치하는것으로 해결할 수 있지만

 

만약 애플리케이션의 복잡도가 심할 경우 구조때문에 코드가 복잡해지게됩니다.

따라서 이를 해결하기 위해 FLUX 디자인 패턴의 도입을 고려해볼 수 있고

 

이것을 리액트는 리덕스를 통해 해결합니다.

https://www.youtube.com/watch?v=9wrHxqI6zuM

정말 눈물나는 역사가 아닐 수 없는.. 이런 역사가 생기게 된 계기는

리덕스가 가진 장황한 문법에 기인합니다.

리덕스 코어는 가벼운 대신 많은 부분을 개발자가 직접 작성해야했고

이는 리덕스의 악명높은 보일러플레이트 문제를 불러왔습니다.

 

리덕스의 장황한 문법에 저도 여러번 고생을 겪었는데..

그걸 또 쉽게 만들어주는 redux-action이나 react-redux같은 대안들도 그다지...

편해진다는 느낌은 없었습니다.

 

오히려 react-redux가 제공하는 connect 함수는 라이브러리의 단일 함수 중

가장 러닝커브가 높다라고 느껴진 함수였습니다.

알고 난 다음엔 별 거 없어보이지만 처음엔 그 생소한 구조가 주는 파괴력이 있다고해야할까요

만약 자바스크립트를 잘 모르고있는 상태였다면 그냥 사용을 포기했을 것 같아요

 

오히려 제공되는 라이브러리들의 함수가 어떤 일을 하는 애들인지

파악하는 데에 시간이 들어서 이시간에 그냥 쌩으로 작성하는게 나을지도..? 란 생각이 들었답니다.

 

하지만 리덕스툴킷은 이런 보일러플레이트를 획기적으로 줄여주고

리덕스 자체를 쉽게 만들어준다고 합니다!

---

👻FLUX의 기본적인 구조

https://bestalign.github.io/translation/cartoon-guide-to-flux/

Flux로의 카툰 안내서

는 아주 좋은 레퍼런스가 있으니 이걸 참고합시다.

중요한 포인트는 단방향 데이터 흐름이며

Action -> Dispatcher -> reducer -> store의 흐름으로 갑니다.

 

각 요소의 역할은 다음과 같습니다.

Action	변경될 상태에 대한 정보를 담고 있어야합니다.
Dispatcher	Action객체를 Reducer함수에 전달하는 역할을 합니다.
reducer	Reducer 함수는 전달받은 Action객체의 정보를 기반으로 전역 상태 저장소 Store의 상태를 변경하는 역할을 합니다.
store	store는 전역 상태를 저장하는 창고와 같은 역할을 수행합니다.

 

1. 상태가 변경되어야 하는 이벤트가 발생하면 Action 객체를 생성합니다.

2. Action 객체를 Dispatch 함수의 인자로 전달합니다. 

3. Dispatch함수는 Action 객체를 Reducer에게 전달해줍니다.

4. Reducer 함수는 전달받은 Action 객체의 값을 토대로 store의 상태를 변경시킵니다.

5. store의 상태가 변경되면 React는 화면을 다시 렌더링합니다.

 

하나하나의 역할을 살펴보면 확실히 분업화되어 인식하기가 쉽네요