[8.1.1 버전]
상태 관리 라이브러리란?
react project를 만들면서 규모가 커질수록 관리해야할 state가 많아지고 이를 체계적으로 관리하는 것이 필요하다. 이때, 개발자는 상태관리 라이브러리를 사용하여 state를 효율적으로 관리할 수 있다.
장점
-
예측 가능한 상태 변화
대부분의 상태 관리 라이브러리는 단방향 데이터 흐름을 따르므로 상태 변화를 예측하기 쉽다. 액션에 의해 상태가 어떻게 변경되는지 추적하기 쉽고 디버깅이 용이하다. -
컴포넌트 분리
상태 관리 라이브러리를 사용하면 상태와 비즈니스 로직을 별도의 컴포넌트로 분리할 수 있다. 이로 인해 컴포넌트들이 간단하고 유지보수가 쉬워지고, 순수 함수를 유지할 수 있다. -
props drilling 방지
props drilling은 컴포넌트가 특정값의 사용을 위해 여러 상위 컴포넌트에서 props를 정의하고 전달받는 과정이다. 이는 여러 컴포넌트에서 사용하지 않는 props를 정의해야하고 필요없는 코드를 증가시킨다. 이를 해소하기 위해 react에서 자체적으로 ContextAPI 를 지원하지만, 재사용성이 떨어지고 불필요한 리렌더링이 발생한다는 문제는 여전히 남아있었다. 상태 관리 라이브러리는 이를 완벽히 해소시켜준다. -
비동기 작업 관리
일부 상태 관리 라이브러리들은 미들웨어를 통해 비동기 작업을 처리하는 기능을 제공한다. 이를 통해 API 호출과 같은 비동기 작업을 효율적으로 관리할 수 있다. -
확장성
상태 관리 라이브러리들은 다양한 기능과 확장성을 제공한다. 라우팅, 미들웨어, 로깅 등 다양한 기능을 쉽게 추가할 수 있다. -
개발자간 협업 강화
프로젝트에서 사용하는 주요 state를 유지보수하기 용이하고, 공통된 코드 패턴 구조를 가지고 있기 때문에 팀원들간의 코드 이해도를 높일 수 있다.
이러한 상태관리 라이브러리의 종류에는
react-redux, recoil, Mobx, Zustand, xState 등이 있다. 현재 블로그에서는 react-redux, recoil, Mobx를 중점적으로 다룰 예정이다.
Redux?
Redux는 js 애플리케이션의 상태를 관리하기 위한 상태 관리 라이브러리이다. redux는 단방향 데이터 흐름(Flux)을 따르며, 상태를 예측 가능하게 만들고 상태 변화를 관리하기 위한 간단한 패턴을 제공한다. react 외에도 다른 프론트엔드 프레임워크에서 사용이 가능하지만, react와 중점적으로 사용할 수 있게 해주는 react-redux가 따로 존재한다.
주요 구성 요소
-
Store
애플리케이션의 상태를 담고 있는 단 하나의 중앙 전역 저장소이다. 모든 컴포넌트가 이 저장소에 접근할 수 있다. 상태를 변경하기 위해 액션(action)을 디스패치(dispatch)한다. -
Action
애플리케이션에서 상태를 변경시키기 위해 발생하는 이벤트를 나타내는 일종의 객체이다. 액션은 반드시type이라는 프로퍼티를 가져야 하며, 다른 추가 데이터는payload라는 프로퍼티에 저장되어 이동한다. -
Reducer
현재 상태와 액션을 받아서 새로운 상태를 반환하는 함수이다. 상태 변경 로직이 포함되어 있으며, 액션의type에 따라 적절한 상태 변화를 수행한다. Redux는 단일 리듀서를 사용하는 것이 일반적이지만, 복잡한 애플리케이션에서는 여러 개의 리듀서를 조합하여 사용할 수도 있다. -
Dispatcher
액션을 발생시키는 함수로서, 액션을 디스패치하여 리듀서가 실행되도록 한다.useDispatch()hook을 이용해 사용한다. -
Selector
Redux 상태(store)에서 원하는 데이터를 추출하는 함수이다.useSelector()hook을 통해 사용하며, 컴포넌트에서 필요한 상태를 추출하는 데 사용된다. Selector를 사용하면 컴포넌트와 리덕스 상태를 분리하여 코드를 더 깔끔하고 유지보수하기 쉽게 만들어 준다.
Redux가 유용할 때
- 앱의 여러 위치에서 많은 양의 애플리케이션 상태를 공유해야 할 때
- 시간 경과에 따라 앱 상태가 자주 업데이트 될 때
- 앱에 중간 또는 큰 규모의 코드베이스가 있으며 많은 사람과 팀플레이를 해야할 때
redux에서 제공하는 패턴과 도구를 사용하면 애플리케이션의 상태가 언제, 어디서, 왜, 어떻게 업데이트되는지, 그리고 이러한 변경이 발생할 때 애플리케이션 로직이 어떻게 작동하는지 더 쉽게 이해할 수 있다. 또한 cra (create react app)을 할 때 템플릿을 설치하면 redux에 대한 샘플 예시가 제공되므로 보다 빠르게 습득할 수 있다. typescript 전용 예시 또한 제공되어 있다.
