[Codestates FE] 블로깅 챌린지 2주차 - Redux

리덕스란 ?

리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리이다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 더욱 효율적으로 관리할 수 있다. 또한, 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태값을 전달하거나 업데이트할 수 있다.

리덕스 라이브러리는 전역 상태를 관리할 때 굉장히 효과적이다. 물론 리덕스를 사용하는 것이 해결책은 아니지만, 프로젝트의 규모가 클 경우 체계적으로 상태를 관리할 수 있는 리덕스 라이브러리를 사용하는 것이 좋다. 코드의 유지보수성도 높여주고 작업 효율도 극대화해주며 아주 편리한 개발자 도구도 지원하고 미들웨어라는 기능을 제공해 비동기 작업을 훨씬 효율적으로 관리할 수 있다.

1. 액션

상태에 어떤 변화가 필요하면 액션(action)이란 것이 발생한다. 이는 하나의 객체로 표현되는데, 액션 객체는 다음과 같이 이루어져 있다.

{
  type: 'TOGGLE_VALUE'
}

액션 객체는 type 필드를 반드시 가지고 있어야 한다. 이 값을 액션의 이름이라고 생각하면 된다. 그리고 그 외의 값들은 나중에 상태 업데이트를 할 때 참고해야할 값이며, 작성자 마음대로 넣을 수 있다.

{
  type: 'ADD_TODO',
    data:{
      id: 1,
      text: '리덕스 배우기'
    }
}

액션 생성 함수

액션 생성 함수(action creator)는 액션 객체를 만들어주는 함수이다. 어떤 변화를 일으킬 때마다 액션 객체를 만들어야 하는데, 매번 액션 객체를 직접 작성하기 번거로울 수 있고, 만드는 과정에서 실수로 정보를 놓칠 수 있다. 이를 방지하기 위해 함수로 만들어 관리한다.

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

2. 리듀서

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

const initialState = {
  counter: 1
}

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

3. 스토어

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

4. 디스패치

디스패치(dispatch)는 스토어의 내장 함수 중 하나이다. 디스패치는 '액션을 발생시키는 것'이라고 이해하면 된다. 이 함수는 dispatch(action)과 같은 형태로 액션 객체를 파라미터로 넣어서 호출한다. 이 함수가 호출되면 스토어는 리듀서 함수를 실행시켜 새로운 상태를 만들어 준다.