세 가지 기본 원칙

세 가지 기본 원칙 (Three Principles)

Redux는 세 가지 근본 원칙으로 설명할 수 있어요. 이 세 원칙이 Redux의 설계 방향과 상태 관리 철학을 이루고 있으니, 하나씩 짚어볼게요.

출처: Redux — Three Principles

1. 단일 저장소, 단일 상태 트리

애플리케이션의 전역 상태는 단일 store 안의 객체 트리로 저장돼요. 상태가 트리 하나에 모여 있으면 서버의 상태를 직렬화해서 클라이언트에 별도 코딩 없이 수화(hydrate)할 수 있어 유니버설 앱을 만들기 쉬워요. 단일 상태 트리는 디버깅과 검사도 쉽게 만들고, 개발 중에 앱 상태를 영속화해 개발 사이클을 빠르게 해 줘요. 모든 상태가 한 트리에 있으면 Undo/Redo처럼 전통적으로 구현하기 어려웠던 기능도 갑자기 간단해져요.

console.log(store.getState())

/* Prints
{
  visibilityFilter: 'SHOW_ALL',
  todos: [{
    text: 'Consider using Redux',
    completed: true,
  }, {
    text: 'Keep all state in a single tree',
    completed: false,
  }]
}
*/

2. 상태는 액션으로만 바꾼다

상태를 바꾸는 유일한 방법은 무슨 일이 일어났는지 기술하는 [action] 객체를 dispatch 하는 것이에요. 이렇게 하면 뷰나 네트워크 콜백이 상태에 직접 쓰는 일이 절대 일어나지 않아요. 대신 상태를 변환하겠다는 의도(intent)를 표현할 뿐이죠. 모든 변경이 중앙집중화되고 엄격한 순서로 하나씩 처리되므로, 신경 써야 할 미묘한 경쟁 조건(race condition)이 없어요. 액션은 평범한 객체라서 로깅하거나 직렬화할 수 있고, 재생(replay)도 가능해요.

3. 순수 리듀서로 변화를 기술

상태가 어떻게 변할지를 기술하려면 순수 함수인 [reducer]를 작성해요. 리듀서는 이전 상태와 액션을 받아 새 상태를 반환하는 순수 함수예요. 이전 상태를 그대로 두고 새 상태 객체를 반환하며, 예측 가능성을 유지하기 위해 사이드 이펙트나 비동기 로직을 포함하지 않아요. 모든 리듀서가 같은 방식으로 호출되기 때문에, 상태 변화의 이유가 코드 어디서든 명확해져요.

이 세 원칙이 모이면 상태 변화가 언제, 왜 일어나는지를 항상 따라갈 수 있는 예측 가능한 상태 관리가 성립돼요.

더 알아보기