Redux?

리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리이다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다. 또한, 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있다.
리덕스를 사용하면 상태를 더욱 체계적으로 관리할 수 있기 때문에 프로젝트의 규모가 클 경우에는 코드의 유지 보수성도 높여 주고 작업 효율도 극대화해 주기 때문에 리덕스를 사용하는 편이 좋다.

Redux를 사용하면 접하게 될 키워드

액션

상태에 어떠한 변화가 필요하면 액션이란 것이 발생한다. 이는 하나의 객체로 표현되는데 다음과 같은 형식으로 이루어져 있다.

{
  type : 'TOGGLE_VALUE'
}

액션 생성 함수

액션 생성 함수는 액션 객체를 만들어 주는 함수이다.

const changeInput = text => ({
  type : 'CHANGE_INPUT',
  text
});

어떤 변화를 일으켜야 할 때 액션 객체를 만들어야 하는데 매번 액션 객체를 직접 작성하면 번거롭고 만드는 과정에서 실수로 정보를 놓칠 수도 있어 이러한 일들을 방지하기 위해 이를 함수로 만들어서 관리한다.

리듀서

리듀서는 변화를 일으키는 함수이다. 액션을 만들어서 발생시키면 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아 온다. 그리고 두 값을 참고하여 새로운 상태를 만들어서 반환한다.

const initialState = {
  counter : 1
};
function reducer(state = initialState, action) {
  switch (action,type) {
    case INCREMENT:
      return {
        counter : state.counter +1
      };
    default:
      return state;
  }
}

스토어

프로젝트에 스토어를 적용하기 위해 스토어를 만든다. 한 개의 프로젝트는 단 하나의 스토어만 가질 수 있다. 스토어 안에는 현재 애플리케이션 상태와 리듀서가 들어가 있으며, 그 외에도 몇 가지 중요한 내장 함수를 지닌다.

디스패치

디스패치는 스토어의 내장 함수 중 하나이다. 액션을 발생시키는 것이라고 이해하면 된다. 이 함수가 호출되면 스토어는 리듀서 함수를 실행시켜서 새로운 상태를 만들어 준다.

구독

구독도 스토어의 내장 함수 중 하나이다. subscribe 함수 안에 리스너 함수를 파라미터로 넣어서 호출해 주면 이 리스너 함수가 액션이 디스패치되어 상태가 업데이트될 때마다 호출된다.

const listener = () => {
  console.log('상태가 업데이트 됨');
}
const unsubscribe = store.subscribe(listener);

unsubscribe();