리덕스(Redux)란?

zne·2021년 6월 29일

공식문서에 나온 정의는 다음과 같다.

자바스크립트로 구동되는 어플리케이션에서 예측 가능한 상태관리를 도와주는 상태관련 라이브러리.

그런데, React의 setState, Hooks의 useState를 사용해서도 충분히 상태관리를 할 수 있는데 굳이 리덕스를 왜 사용해야할까?

우리가 알고 있는 리액트에서의 상태관리는 각 컴포넌트 안에서 이루어지는데, 각 컴포넌트에 필요한 상태는 각각의 컴포넌트 내에서 선언되고 수정된다.

예를 들어 위 그림과 같은 컴포넌트 구성이 있다고 했을 때, 자식 컴포넌트6에서 자식 컴포넌트8으로 상태를 전달해줘야 한다면 다음과 같은 순서대로 상태가 전달되어야 한다.

자식 컴포넌트2 -> 부모 컴포넌트 -> 자식 컴포넌트4 -> 자식 컴포넌트8

따라서 상태가 여러 컴포넌트에서 사용될 경우 부모컴포넌트를 통해서 전달 된다. 이러한 방식은 규모가 작은 프로젝트나 상태의 개수가 많지 않을 때는 별 문제가 없어 보이지만, 규모가 커질수록 상태를 관리하기가 복잡해진다.

이러한 문제를 해결하기 위해 상태 관련 라이브러리인 리덕스(Redux)를 사용한다.

Store
: 컴포넌트들과 별개로 상태가 관리되는 오직 하나의 공간, 스토어에 접근해서 필요한 상태를 가져온다.

Action
: 변경하고자 하는 상태 정보를 담은 자바스크립트 객체로, dispatch의 전달인자로 담겨 Reducer로 전달된다.

Reducer
: 현재 상태가 담겨있고, Action을 이용해 새로운 상태를 만들어낸다.

1. Single source of truth
모든 상태는 하나의 저장소(store) 안에 하나의 객체 트리 구조로 저장된다.

2. State is read-only
상태는 읽기전용(불변) 데이터이며, 오직 액션만 상태를 변경할 수 있다. (예측 가능)

3. 변화를 일으키는 함수, 리듀서는 순수 함수여야 한다.
순수함수: 반환(reture) 값이 전달 인자(argument) 값에만 의존하는 함수
전달받은 매개변수 state, action을 변형하지 않아야 하고, 반드시 새로운 상태를 반환 해야한다.

상태를 예측 가능하게 만들어준다.

유지보수가 용이하다.

디버깅에 유리하다.

테스트를 붙이기 쉽다.