React - Redux 너무 쉬운 리덕스

앱의 사이즈가 커지고 컴포넌트의 관계가 점점 더 복잡해지면 state와 props로 상태관리를 추적하기가 매우 힘들어질 것 같다. 자식의 자식의 자식컴포넌트에서 데이터가 필요해서 부모의 부모까지 props를 전달해오면서 코딩할 생각을 하니 머리가 아프다. 그래서 리덕스가 필요하다. 리덕스는 스토어라는 곳에서 전역상태관리를 하기 때문이다. 전역상태관리란 그냥 모든state를 최신화해서 한곳에서 관리한다. 이렇게 이해하면 될 것 같다. 참 말이 어렵다.

지금부터 어려운 말은 빼고 흐름을 익힌다음 거기에 이름을 붙여보자.

 

스토어는 실제로 데이터를 가공하는 일을 하는 함수를 여러개 가지고 있다. 그리고 그 함수는 object형식의 데이터를 받아서 처리한다. 근데 매번 데이터를 보낼때 객체형식을 입력하려면 귀찮고 실수할 여지도 있으니 그 객체를 리턴하는 함수를 만들어놓고, 그 함수에 매개변수를 넣어서 객체를 리턴해 보내는 식으로 사용한다. 

데이터를 가공하는 일을 하는 함수 = 리듀서

object형식의 데이터 = 액션

데이터를 보내는 것 = 디스패치

객체를 리턴하는 함수 = 액션생성함수

이렇게 생각하면 복잡할게 하나도 없다. 이번에 리덕스를 처음 배우면서 실습한 내용을 떠올려보자

객체를 리턴하고 있다. 즉, 액션생성함수 들의 모습이고 액션생성 함수들이 리턴하고 있는게 액션이다.

 

액션type에 따라 데이터를 원하는 모양으로 가공하는 리듀서이다. 이렇게 리듀서를 거쳐 나온 가공된 데이터는 어떤 컴포넌트에서든 useSelector 훅으로 접근이 가능하다. 매우매우 편하고 엄청 쉽다. 

달라질 부분은 리듀서부분인데 앱이 커지면서 리듀서가 커지거나 함수가 좀 복잡해질순 있겠지만 그래도 리덕스는 이게 끝이다.