Redux란?

리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리이다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다. 또한, 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있다.
리덕스 라이브러리는 전역 상태를 관리할 때 굉장히 효과적이다. 단순히 전역 상태 관리만 한다면 Context API를 사용하는 것만으로도 충분하지만 리덕스를 사용하면 상태를 더욱 체계적으로 관리할 수 있기 때문에 프로젝트의 규모가 클 경우에는 리덕스를 사용하는 편이 좋다. 코드의 유지 보수성도 높여 주고 작업 효율도 극대화해주기 때문이다. 추가로 아주 편리한 개발자 도구도 지원하며, 미들웨어라는 기능을 제공하여 비동기 작업을 훨씬 효율적으로 관리할 수 있게 해주기도 한다.

Redux 상태관리의 주요 개념

리덕스는 다음과 같은 구조로 상태를 관리한다. Component에서 Action Creator를 통해 Action을 생성하고 그 Action을 Dispath함수로 실행시켜준다. 그러면 Store에서 해당 Reducer로 매칭되는 Action이 있는지 확인하고 Store에 저장된 상태를 변경시켜준다.

1. Action

상태에 어떠한 변화가 필요하면 액션(action)이란 것이 발생한다. 이는 하나의 객체로 표현된다.
액션 객체는 type 필드를 반드시 가지고 있어야 한다. 이 값을 액션의 이름이라고 생각하면 된다.

2. Reducer

리듀서 함수는 현재 상태와 액션 객체를 전달받아 새로운 상태를 반환한다. 이 때, 이전 상태를 변경하지 않고 새로운 상태를 반환하는 불변성(Immutability) 원칙을 지키기 위해, 리듀서 함수는 항상 새로운 객체를 반환해야 한다.

3. Store

전역 상태를 저장한다. 자바스크립트 객체 형태로 저장되어 있으며 리듀서를 통하지 않고 접근할 수 없다.
하나의 어플리케이션에 하나의 저장소만 존재해야 한다.

4. Dispatch

액션 객체를 생성한 후, 스토어의 디스패치 함수를 사용하여 액션을 발생시킨다. 디스패치 함수는 스토어에 액션 객체를 전달하고, 이를 처리하는 리듀서 함수를 호출한다.

Redux vs Context API

Redux는 중앙 집중식 상태 관리 패턴을 따르며, 액션과 리듀서를 사용하여 상태 변경을 처리한다. React Context API는 컴포넌트 계층 구조에서 상태를 전파하는 기능을 제공하며, 상태를 업데이트할 때 setState 함수와 비슷한 방식을 사용한다. Redux는 규모가 큰 애플리케이션에서 유용하며, 개발자 도구를 제공한다. 반면, Context API는 작은 규모의 애플리케이션에서 간단하게 상태를 관리할 수 있다.