리덕스 Redux

리덕스(Redux)란 자바스크립트 상태 관리 라이브러리입니다. 상태 관리 라이브러리도 무수히 많지만 그 중에서 가장 많은 다운로드 수를 기록하고 있습니다. 앞에 소개에서 자바스크립트의 상태 관리 라이브러리라고 하는 만큼 리액트뿐만 아니라 바닐라부터 앵귤러, Vue 등 다양한 자바스크립트 라이브러리, 프레임워크에서 사용을 할 수 있는 것이 리덕스입니다.

리덕스를 통해 리액트는 전역 상태 관리를 편리하게 할 수 있습니다. 뿐만 아니라 리덕스는 다양한 도구들과 미들웨어 덕분에 리액트에서 중요한 상태관리를 편하게 만들어주는 도구이기도 합니다.

리덕스의 기본 개념

리덕스에서 사용되는 몇 가지 기본적인 개념들을 짚고 넘어가겠습니다.

액션 action

액션은 상태에 변화가 필요해지면 발생하는 것입니다. 액션은 하나의 객체로 나타납니다. 유명한 리액트 클론 프로젝트인 TODO LIST를 예시로 들자면, todo를 추가하거나, 삭제를 하는 경우 액션이 발생하고 그에 대한 액션 타입 정의가 필요합니다. 액션 객체에서 type 필드는 필수 속성입니다.

//추가 액션
{
  type: 'ADD_TODO',
  data: {
    id: 1,
    text: '리덕스',
  }
}

//삭제 액션
{
  type: 'DELETE_TODO',
}

액션 생성 함수 action creator

액션 생성 함수는 액션 객체를 만드는 함수입니다. 액션 생성 함수를 이용하면 액션 발생 시 마다 액션 객체를 작성하지 않아도 되고 누락되거나 하는 일을 방지할 수 있습니다.

const addTodo = data => ({
  type: 'ADD_TODO',
  data
});

리듀서 reducer

리듀서는 변화를 만드는 함수입니다. 액션이 만들어지고 발생된다면, 리듀서가 파라미터로 현재 상태와 액션 객체를 받아 새로운 상태를 반환하게 됩니다.

function reducer(currentState, action) {
  return newState;
}

스토어 store

스토어는 리덕스 상태 저장소입니다. 프로젝트에 리덕스를 저장하기 위해 만들며, 하나의 프로젝트에 하나의 스토어만 올 수 있습니다. 스토어에는 현재 어플리케이션 상태, 리듀서, 기타 내장 함수 등이 포함되어 있습니다.

디스패치(dispatch)라는 스토어 내장 함수가 있는데, 이 함수는 액션을 발생시키는 역할을 합니다. 디스패치가 호출되면 스토어가 리듀서를 싱행시켜 새로운 상태를 만들어냅니다.

구독(subscribe)도 스토어 내장 함수입니다. 이 함수의 파라미터로 리스너 함수를 넣고 호출하면 디스패치를 통해 상태가 업데이트 될 때 마다 리스너가 호출됩니다.

context API VS Redux

리액트에는 context API라는 전역 상태 관리 api가 존재합니다. 리덕스도 전역 상태를 관리하기 위해 사용한다고 했는데 과연 무엇을 언제 써야할까요?

결론은 단순한 전역 상태 관리만이 있다면 context API를 이용하고 그게 아니라면 리덕스를 이용하는 것이 좋습니다. 일단 리덕스가 context API를 기반으로 만들어지기도 했고 전역 상태 관리 관련 기능만 제공하는 api와 다르게 다양한 도구나 미들웨어, 좋은 성능을 보여주기 때문에 대형 프로젝트에서는 리덕스를 사용하는 것이 좋다고 합니다.