Redux로 간단한 Todo 만들기

리엑트는 하위 컴포넌트로 데이터를 전달할 때 state 값을 props로 전달하게 됩니다.

하지만 컴포넌트의 깊이가 깊어지고 프로젝트가 점점 더 커질 경우에는 데이터의 흐름을 파악하고 관리하는게 어렵게 됩니다.

위 이미지를 보면 D컴포넌트는 props를 통해 B, C 컴포넌트를 거쳐 데이터를 전달 받는 걸 알 수 있습니다.

하지만 만약 프로젝트의 규모가 커져서 컴포넌트의 개수가 100개라고 가정을 한다면...

예를 들어 50번 컴포넌트에 데이터를 전달하기 위해서 하위 컴포넌트로 props를 계속해서 전달 해야 하는데요.

이러한 현상을 Props Drilling 이라고 하는데요.

데이터가 중간에 예기치 않게 전달이 되지 않고 오류가 발생하게 된다면 원인을 찾는 시간이 엄청 오래 걸리고 이러한 프로젝트를 유지보수하는 것도 결코 쉽지 않을것입니다.

이런 Props Drilling 문제를 해결하기 위한 방법으로는 상태 관리 라이브러리를 사용하는 방법이 있습니다.

대표적인 상태 관리 라이브러리는 Redux, Recoil, MobX, Context API 가 있습니다.

이번 글에서는 Redux를 사용해서 간단한 Todo 예제를 만들어 보고 학습한 것을 작성하려고 합니다.

Redux 설치

Redux는 리엑트에서 자체적으로 제공하지 않기 때문에 별도로 redux 라이브러리를 설치해야 합니다.

- npm을 통한 설치 : npm install redux react-redux

- yarn을 통한 설치 : yarn add redux react-redux

Redux 동작 방식

순서 : UI -> Dispatch -> Action -> Reducer -> UI

Redux 사용해서 Todo 만들기

reducer.js

- 전달 받은 action 객체에 따라서 기존 state를 참조하여 수정 후 반환 합니다.

- 바로 이 reducer에 있는 state가 앞으로 모든 컴포넌트에서 전역적으로 사용되게 됩니다.

index.js

가장 최상단 컴포넌트를 Provider로 감싸주고 props로 store를 넘겨주게 되면 하위에 있는 컴포넌트들은 Props Drilling을 거치지 않고 state를 직접적으로 사용 할 수 있게 됩니다.

action.js

Dispatch를 통해 reducer에 전달해줄 action 함수들 입니다.

AddTodo.js

1. useDispatch() 를 통해서 input 값을 action 함수에 전달하게 됩니다.

2. 작성된 action 객체는 reducer로 전달되고 state를 갱신시키게 됩니다.

TodoList.js

useSelector()를 통해서 store에 있는 state를 접근하고 사용할 수 있게 됩니다.

후기

Redux를 사용하면 상태 관리에 용이성과 데이터 흐름을 쉽게 파악할 수 있지만 그만큼 추가해야 하는 코드들도 상당히 많아지게 되는 아이러니한 상황이 발생하는 것 같습니다. 프로젝트 규모에 맞춰서 적절한 상태 관리 라이브러리를 사용하는 연습이 많이 필요하다는 생각이 듭니다...