[React JS] 리액트를 다루는 기술 - 리덕스 라이브러리 이해하기

 

들어가기 앞서...

리덕스는 가장 많이 사용하는 상태 관리 라이브러리이다.

리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 더욱 효과적으로 관리할 수 있으며, 컴포넌트끼리 동일한 상태를 공유해야 할 때 여러 컴포넌트를 거치지 않고 쉽게 상태 값을 전달하거나 업데이트 할 수 있다.

 

리덕스를 사용하면 특히 전역 상태를 관리할 때 효과적이다.

하지만 Context API를 통해서 똑같은 작업을 할 수 있고 전역 상태만 관리한다면 Context API만 사용해도 충분하다.

그러나 Context API와 비교해 리덕스는 상태를 더욱 체계적으로 관리할 수 있고 프로젝트의 규모가 커질 수록 리덕스를 사용하는 것이 좋다.

 

리덕스는 코드의 유지 보수성도 높여주며, 작업 효율도 극대화시키고, 편리한 개발자 도구 지원, 미들 웨어 기능 제공으로 비동기 작업이 효율적인 장점이 있다.

 

 

리덕스 개념 미리 정리

리덕스를 사용하면서 알아야 할 키워드들이 있다.

 

 

1) 액션

상태에 어떤 변화가 필요하면 액션이 발생했다고 하며, 이는 하나의 객체로 표현된다.

액션 객체의 형식은 아래와 같다.

{
  type: 'TOGGLE_VALUE'
}

 

액션 객체는 type 필드를 반드시 가져야 한다. type 필드는 액션의 이름이라고 생각하면 된다.

type 필드 외에 값들은 나중에 상태 업데이트를 할 때 참고해야 할 값이며, 작성자의 마음대로 넣을 수 있다.

 

{
  type: 'ADD_TODO',
  data: {
    id: 1,
    text: '리덕스를 배워보자!'
  }
}

{
  type: 'CHAGNE_INPUT',
  text: '안녕'
}

 

 

2) 액션 생성 함수

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

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

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

 

만약 어떤 변화를 일으켜야 할 때마다 액션 객체를 만들어야 하는데 매번 액션 객체를 직접 작성하는 과정은 번거롭고, 만드는 과정에서 실수로 정보를 놓칠 수 있다.

이런 일을 예방하고자 함수로 만들어 관리하는 것이다.

 

 

3) 리듀서

리듀서는 변화를 일으키는 함수이다.

액션을 만들어 발생시키면 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아온다.

그리고 두 값을 참고해 새로운 상태를 만들어 반환해준다.

const initialState = {
  counter: 1
};

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

 

 

4) 스토어

프로젝트에 리덕스를 적용하기 위해 스토어를 만들어야 한다.

한 개의 프로젝트에는 단 하나의 스토어만 가질 수 있다.

스토어 안에는 현재 어플리케이션 상태와 리듀서가 들어가 있으며, 그 외에도 몇 가지 중요한 내장 함수를 가진다.

 

 

5) 디스패치

디스패치는 스토어 내장 함수 중 하나로, 액션을 발생시키는 것이다.

디스패치 함수는 dispatch(action)과 같은 형태로 액션 객체를 파라미터로 넣어 호출한다.

디스패치 함수가 호출되면 스토어는 리듀서 함수를 실행시켜 새로운 상태를 만들어준다.

 

 

6) 구독

구독도 디스패치와 마찬가지로 스토어의 내장 함수 중 하나이다.

구독(subscribe) 함수를 사용한 예시는 아래와 같다.

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

unsubscribe();

위 예시처럼 subscribe 함수를 직접 사용해도 되지만, 리덕스를 사용할 때는 subscribe 함수를 직접 사용하지 않아도 된다. 컴포넌트에서 리덕스 상태를 조회하는 과정에서 react-redux 라이브러리가 이 작업을 대신 해주기 때문이다.

 

 

7) 액션 발생시키기

앞서 액션을 발생시키는 것은 디스패치라고 하였다.

디스패치를 하기 위해서는 스토어의 내장 함수인 dispatch를 사용하며 파라미터에 액션 객체를 넣어준다.

divToggle.onclick = () => {
  store.dispatch(toggleSwitch());
};
btnIncrease.onclick = () => {
  store.dispatch(increase(1));
};
btnDecrease.onclick = () => {
  store.dispatch(decrease());
};

위 코드는 각 DOM 요소에 클릭 이벤트를 설정해주었다. 이벤트 함수 내부에서는 dispatch 함수를 사용하여 액션을 스토어에게 전달해준다.

 

 

 

리덕스의 3가지 규칙

1) 단일 스토어

하나의 어플리케이션 안에는 하나의 스토어가 들어있다.

사실 여러 개의 스토어를 사용해도 된다. 특정 업데이트가 빈번하게 일어나거나, 어플리케이션의 특정 부분을 완전히 분리시키는 경우 여러 개의 스토어를 만들어 사용할 수 있다.

하지만 상태 관리가 복잡해지기 때문에 여러 개의 스토어를 사용하는 것은 권장하지 않는다.

 

 

2) 읽기 전용 상태

리덕스 상태는 읽기 전용이다.

상태를 업데이트할 때 기존의 객체는 건드리지 않고 새로운 객체를 생성해 주어야 한다.

리덕스에서 불변성을 유지해야 하는 이유는 내부적으로 데이터가 변경되는 것을 감지하기 위해 얕은 비교 검사를 하기 때문이다. 객체의 변화를 감지할 때 객체의 깊숙한 안쪽까지 비교하는 것이 아닌 겉핥기 식으로 비교해 좋은 성능을 유지할 수 있는 것이다.

 

 

3) 리듀서는 순수한 함수

변화를 발생시키는 리듀서 함수는 순수한 함수여야 한다.

 

▶ 순수한 함수의 조건

• 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받는다.
• 파리미터 외의 값에는 의존하면 안된다.
• 이전 상태는 절대로 건드리지 않고, 변화를 준 새로운 상태 객체를 만들어 반환한다.
• 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과 값을 반환해야 한다.

 

리듀서 함수 내에서 랜덤 값 생성, Date 함수 사용한 시간 가져오기, 네트워크 요청 등은 파라미터가 같아도 다른 결과를 만들어 낼 수 있기 때문에 사용하면 안된다.