리덕스를 통한 상태관리

리덕스를 통한 상태관리

이 글 상단에서 언급한 리덕스의 정의처럼, 리덕스는 상태 관리를 효율적 으로 할 수 있도록 도와주는 도구입니다.

상태 변화는 리랜더링을 초래하기 때문에 상태 구성 요소를 최소화하는 것이 좋습니다. SPA에서는, 시간의 흐름에 따라 상태 구성 요소는 분명 많아질 수 밖에 없습니다. 리덕스에서는 이러한 상황에 대처하기 위해, 많아진 상태 구성 요소들을 보다 효율적으로 관리할 수 있도록 아래와 같이 도와줄 수 있습니다.

위와 같이 스토어를 사용하여 상태를 컴포넌트 구조 바깥에 두고 스토어라는 중간자를 통해 상태를 업데이트하거나, 새로운 상태를 전달받습니다.

즉, 리덕스를 사용하면, 위와 같이 상태값을 컴포넌트에 종속시키지 않고, 상태관리를 바깥에서 할 수 있게 해줍니다.

리덕스의 전반적인 흐름

리덕스 개념

우선, 리덕스의 전반적인 흐름에 나오는 용어들의 정의와 역할을 알아보려고 합니다. 리덕스를 사용하다 보면, 중요한 개념들이기 때문에 잘 정리해두는 게 좋겠죠.

1) Action
상태의 변화가 필요할 때, 우리는 액션을 발생시킵니다. 이 액션은 하나의 객체로 표현됩니다. 가령, 할일 목록을 추가를 한다든지, 삭제를 한다면 추가, 삭제에 관한 액션의 타입 정의가 있어야 합니다.

{
  type: "ADD_TODO",
  data: {
    id: 0,
    text: "redux"
  }
}

액션은 Type이라는 필드를 필수적으로 가지고 있어야 하고, 추가적으로 필요한 객체의 요소들은 필요에 의해 추가될 수 있습니다. 위의 data 필드와 같습니다.

2) Action Creator

액션 생성함수라 불리는 Action Creator는 액션을 만드는 함수입니다. 파라미터를 입력받아, 액션 객체 형태로 만들어줍니다.

function addTodo(data) {
  return {
    type: "ADD_TODO",
    data
  };
}

이 함수는 data라는 파라미터를 입력받아, 액션을 객체 형태로 반환하는 역할을 합니다.

3) Reducer

리듀서는 변화를 일으키는 함수입니다. 이 함수는 이전 상태와 액션을 파라미터로 입력받습니다.

function reducer(state, action) {
  ...
  return alteredState;
}

반환값은 로직에 의해 변화된 상태 값을 반환합니다.

4) Store

스토어는 컴포넌트 외부에 있는 상태 저장소입니다. 스토어 안에는 현재 상태들, 리듀서, 그리고 몇 가지의 내장 함수를 포함하고 있습니다.

5) Dispatch

디스패치는 스토어의 내장함수 중 하나로, 액션을 발생시키는 역할을 합니다. 이 카테고리의 해더에 있는 '스토어는 상태 변화의 필요를 어떻게 캐치해?' 질문이 있었죠. 바로 디스패치가 액션을 발생시켜 스토어에게 상태 변화가 필요하다는 것을 알립니다.

그렇게 호출된 액션은 리듀서 함수를 호출시키고, 액션에 맞는 로직대로 상태를 변화시키는 과정을 거치는 것입니다.

리덕스에서, 지켜야할 규칙

리덕스에서는 아래 3가지 규칙을 지켜주셔야 상태관리를 안정적으로 유지할 수 있습니다.

1) 단일 스토어 사용을 권장한다.
하나의 애플리케이션에는 하나의 스토어를 사용하는 것을 권장합니다.

2) 상태는 읽기 전용이여야 한다.
배열 형태의 상태가 있는데, 로직에 의해 배열에 새로운 값을 넣어주어야 한다면, 기존 상태에 새로운 값을 직접 push하는 것이 아니라, concat과 같은 함수를 통해 새로운 값을 이어붙여 생성한 새로운 배열로 교체하여 업데이트해야 합니다. 이러한 업데이트 방식을 사용하면 불변성이 유지됩니다.

불변성이 유지된 업데이트는 리덕스의 변화 감지 방법인 shallow equality에 적합한 상태 변화이기 때문에 이러한 업데이트 방법을 사용합니다.

3) 리듀서는 순수한 함수이여야 한다.
순수한 함수라는 것은 동일한 입력을 받았을 때 언제나 동일한 출력을 내는 함수를 말합니다. 우리가 클릭을 통해 액션을 발생시키면, 배경색이 랜덤으로 바뀌는 로직을 작성한다면, 함수의 로직 내에서 랜덤값을 생성해야 합니다. 랜덤값을 생성한다는 뜻은 결국 매번 출력이 바뀐다는 뜻이기 때문에 순수하지 못한 함수입니다.