Redux

따봉도치 개발자·2023년 4월 24일

Redux는 JavaScript 상태 관리 라이브러리이다.

React 없이도 사용할 수 있는 상태 관리 라이브러리이다. 예를 들면, Augular, jQuery, vanilla JavaScript 등 다양한 framework와 작동될 수 있도록 설계되어있다.

상태 관리 도구가 왜 필요할까?

프로젝트 규모가 커질수록 컴포넌트의 갯수도 많아지고 그만큼 관리해야 할 상태들이 많아 지므로 복잡해 질 수밖에 없다. 이를 해결하고자 Redux라는 상태관리 라이브러리를 사용한다. 일단, React에서는 데이터가 부모에서 자식에게만 흐르는 단방향 패턴을 가지고 있으므로 자식 컴포넌트 끼리는 직접적으로 데이터 전달이 불가능하다. 이때, 자식 컴포넌트 갯수가 많아 진다면 상위 컴포넌트에서 지속적으로 받아와야 하기 때문에 불필요한 data를 전달해주거나 컴포넌트들의 유지보수도 어려워진다. 이른바 Props drilling라는 문제가 발생한다.

Redux는 어떻게 상태 관리가 되는데?

상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성된다.
이 Action 객체는 Dispatch 함수의 인자로 전달됩니다.
Dispatch 함수는 Action 객체를 Reducer 함수로 전달해 줍니다.
Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경합니다.
상태가 변경되면, React는 화면을 다시 렌더링 합니다.
즉, Redux에서는 Action → Dispatch → Reducer → Store 순서로 데이터가 단방향으로 흐른다.

Redux는 어떻게 쓰는 건데?

Store

Store는 오직 하나뿐인 데이터 공간에서 저장소 역활은 한다.

import { createStore } from 'redux';

const store = createStore(rootReducer);

Action

Action은 상태를 변경해야할 때, 어떻게 액션을 취할 것인가를 객체로 표현한다.

const increase = () => {
  return {
    type: 'INCREASE'
  }
}

Reducer

Reducer는 Dispatch에서 전달 받은 Action 객체를 type에 따라 state에 변화를 일으키는 함수이다. 또한, Reducer는 순수함수여야 하고 외부 영향으로 엉뚱한 결과값으로 상태가 변경되면 안된다.

const count = 1

// Reducer를 생성할 때에는 초기 상태를 인자로 요구합니다.
const counterReducer = (state = count, action) => {

  // Action 객체의 type 값에 따라 분기하는 switch 조건문입니다.
  switch (action.type) {

    //action === 'INCREASE'일 경우
    case 'INCREASE':
			return state + 1

    // action === 'DECREASE'일 경우
    case 'DECREASE':
			return state - 1

    // action === 'SET_NUMBER'일 경우
    case 'SET_NUMBER':
			return action.payload

    // 해당 되는 경우가 없을 땐 기존 상태를 그대로 리턴
    default:
      return state;
	}
}

Dispatch()

Dispatch()는 Reducer로 Action을 전달해 주는 함수이며, Dispatch의 전달인자로 Action 객체가 전달된다.

// Action 객체를 직접 작성하는 경우
dispatch( { type: 'INCREASE' } );
dispatch( { type: 'SET_NUMBER', payload: 5 } );

// 액션 생성자(Action Creator)를 사용하는 경우
dispatch( increase() );
dispatch( setNumber(5) );

useSelector()

useSelector()는 컴포넌트와 state를 연결하여 Redux의 state에 접근할 수 있게 해주는 메서드입니다.

import { useSelector } from 'react-redux'
const counter = useSelector(state => state)
console.log(counter) // 1

Redux의 세 가지 원칙

1. Single source of truth : 하나의 어플리케이션은 하나의 store만 가진다.

동일한 데이터는 store라는 하나뿐인 데이터 공간에서 관리됩니다. 이렇게 하면 애플리케이션의 디버깅이 쉬워지고 서버와의 직렬화가 가능하며 클라이언트에서 데이터를 쉽게 받아 들여올 수 있습니다.

2. State is read-only : 상태는 읽기 전용이다.

state를 직접 변경해서는 안되며 state의 변경은 reducer에서만 할 수 있습니다. reducer 이외 공간에서의 state는 읽기 전용인 것입니다. 이것이 바로 데이터의 단방향 흐름의 이점으로 상태를 변화시키는 의도를 정확히 표현할 수 있으며 상태 변경에 대한 추적이 용이해집니다.