리덕스

리덕스 는 글로벌 상태관리와 상태 관련 로직들을 더욱 효율적으로 관리 할 수 있도록 도와주는 상태관리 라이브러리다.

이전에 공부했던 Context API, useReducer 을 사용해 개발하는 흐름과 리덕스 를 사용가는 것은 매우 비슷하다. 하지만 과거에는 Context API 가 지금과 같이 편하지 않았고 이에 자연스럽게 리덕스 를 더욱 많이 사용하게 된 것이다.

리덕스 를 사용할 때와 Context 를 사용할 때는 여러가지 차이가 있다.

1. 미들웨어

리덕스에는 미들웨어 라는 개념이 있는데 사용용도는 다양하다. 그 중 주된 용도는 비동기 작업을 더욱 체계적으로 관리 하는 것이다.

일단 아래와 같은 작업들을 수행 할 수 있다.

• 특정 조건에 따라 액션이 무시되게 만들 수 있음.
• 액션을 콘솔에 출력하거나, 서버쪽에 로깅을 할 수 있음.
• 액션이 디스패치 됐을 때 이를 수정해 리듀서에게 전달되도록 할 수 있음.
• 특정 액션이 발생했을 때 이에 기반하여 다른 액션이 발생되도록 할 수 있음.
• 특정 액션이 발생했을 때 특정 자바스크립트 함수를 실행시킬 수 있음.

2. 유용한 함수, Hooks

이전에 Context API 와 useReducer 를 사용 할 때 하던 여러 작업(Provider 설정, Context 작성 등)들을 리덕스에서는 더욱 편하게 사용할 수 있다.

예를 들어 connext, useSelector, useDiapatch, useStore 등이 있는데 connext 함수는 리덕스의 상태 또는 액션 생성 함수를 props 로 받아 올 수 있고, useSelector, useDiapatch, useStore 등을 사용하면 상태를 쉽게 조회하거나 액션을 디스패치 할 수 있다.

3. 최적화

리덕스에는 기본적인 최적화가 되어있다. 상태를 받아와 사용하게 될 때 필요한 상태가 바뀔 때만 리렌더링이 되도록 되어있다.

4. 하나의 커다란 상태

Context API 를 사용하여 글로벌 상태를 관리하는 경우, 기능별로 Context 를 만들어 사용하는 것이 일반적인데 리덕스는 모든 글로벌 상태를 하나의 커다란 상태 객체에 넣어서 사용하는 것이 필수적이다. 즉, 매번 Context 를 새로 만드는 수고를 덜 수 있다.

5. DevTools

리덕스는 아주 유용한 개발자 도구가 있다. 현재 상태를 한눈에 볼 수 있으며, 지금가지 어떤 변화가 있었는지, 특정 시점으로 상태를 돌릴 수 도 있다.

리덕스에서 사용되는 키워드

액션 (Action)

상태에 어떤 변화가 필요할 때 액션이란 것을 발생시킨다. 액션은 하나의 객체로 표현되는데 type 필드가 반드시 있어야 한다.

{
    type: "CHANGE_BLABLA"
}

그외의 값들은 마음대로 설정이 가능하다

//ex
{
    type: "CHANGE_BLABLA",
    data: {
        id : 1,
        text : "블라블라"
    }
}
//ex
{
    type: "CHANGE_INPUT",
    text: "안녕"
}

액션 생성함수 (Action Creator)

액션을 만드는 함수로 파라미터를 받아와 액션 객체 형태로 만들어 준다.

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

//화살표 함수로도 생성 가능
export const changeInput = text => ({
    type: "CHANGE_INPUT",
    text
});

액션 생성함수를 사용하는 것이 필수는 아니지만 사용하면 조금 더 편하다.

리듀서 (Reducer)

변화를 일으키는 함수로 이전에 공부했던 useReducer 의 리듀서와 같은 함수다. useReducer 의 리듀서와 차이도 있는데 보통 useReducer 을 사용할 때는 default 값으로 에러처리를 했는데 리덕스의 리듀서에서는 state 를 그대로 반환하도록 작성해야 한다.

//ex) 카운트 로직
function counter(state, action) {
  switch (action.type) {
    case 'INCREASE':
      return state + 1;
    case 'DECREASE':
      return state - 1;
    default:
      return state;
  }
}

리듀서는 불변성을 항상 지켜줘야 한다. 리덕스를 사용 할 때는 여러개의 리듀서를 만들고 이를 합쳐 루트 리듀서를 만들 수 있다. 루트 리듀서 안의 리듀서들은 서브 리슈서라 부른다.

스토어(Store)

리덕스에는 한 애플리케이션 당 하나의 스토어를 만든다. 스토어 안에는 현재 앱상태, 리듀서. 몇가지 내장함수 들이 있다.

1. 디스패치(dispatch)

디스패치는 스토어의 내장함수 중 하나로 액션을 발생시키는 것이다. 디스패치에 액션을 파라미터로 전달하면 스토어가 리듀서 함수를 실행 시켜 해당 액션을 처리하는 로직이 있다면 액션을 참고해 새로운 상태를 만들어준다.

dispatch(action);

1. 구독(subscribe)

구독도 스토어의 내장함수 중 하나로 subscribe 함수에 특정 함수를 전달해주면 액션이 디스패치 되었을 때마다 전달한 함수가 호출된다.

리액트에서 리덕스 사용시 구독 함수를 직접 사용하는 일은 별로 없고 react-redux 에서 제공하는 connect 또는 useSelector 등을 사용하는 일이 더 많다.