[React] Redux 란

Redux란 ?

Redux 는 React에서 주로 사용하는 상태 관리 라이브러리 입니다.
Redux 를 사용하면 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있으며 글로벌 상태 관리도 손쉽게 할 수 있습니다. 

 

 

 

다음은 Redux에서 주로 접하게 되는 키워드 들에 대해 알아보겠습니다.

 

Action 액션

상태에 어떠한 변화가 필요하게 될 땐, 우리는 액션이란 것을 발생시킵니다.

이는, 하나의 객체로 표현되는데 액션 객체는 다음과 같은 형식으로 이뤄져있습니다.

 

액션은 type 필드는 필수로 가지고 있어야 하고, 그 외에는 자유롭게 넣을 수 있습니다.

 

{
  type: "CHANGE_INPUT",
  text: "안녕하세요"
}

{
  type: "ADD_TODO",
  data: {
    id: 0,
    text: "리덕스 배우기"
  }
}

 

 

Action Creator 액션 생성 함수

액션을 만드는 함수입니다. 단순히 파라미터를 받아와서 액션 객체 형태로 만들어 줍니다.

리덕스를 사용 할 때 액션 생성함수를 사용하는것이 필수적이진 않습니다. 액션을 발생 시킬 때마다 직접 액션 객체를 작성할수도 있습니다.

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

// 화살표 함수로도 만들 수 있습니다.
export const changeInput = text => ({ 
  type: "CHANGE_INPUT",
  text
});

 

 

Reducer 리듀서

리듀서는 변화를 일으키는 함수입니다. 리듀서는 두가지의 파라미터를 받아옵니다.

리듀서는, 현재의 상태와 전달 받은 액션을 참고하여 새로운 상태를 만들어서 반환합니다.

 

리덕스를 사용 할 때에는 여러개의 리듀서를 만들고 이를 합쳐서 루트 리듀서 (Root Reducer)를 만들 수 있습니다. (루트 리듀서 안의 작은 리듀서들은 서브 리듀서라고 부릅니다.)

function reducer(state, action) {
  // 상태 업데이트 로직
  return alteredState;
}

function counter(state, action) {
  switch (action.type) {
    case 'INCREASE':
      return state + 1;
    case 'DECREASE':
      return state - 1;
    default:
      return state;
  }
}

 

 

Store 스토어

리덕스에서는 한 애플리케이션당 하나의 스토어를 만들게 됩니다.

스토어 안에는 현재의 앱 상태와 리듀서, 몇가지 내장 함수들이 있습니다.

 

import propertyTypeSlice from './slices/propertyTypeSlice';
import { combineReducers, configureStore } from '@reduxjs/toolkit';

const rootReducer = combineReducers({
  propertyType: propertyTypeSlice.reducer,
  personInfo: personInfoSlice.reducer,
});

export const createStore = () =>
  configureStore({
    reducer: rootReducer,
  });

export const store = createStore();

 

 

Dispatch 디스패치

디스패치는 스토어의 내장함수 중 하나입니다. 디스패치는 액션을 발생 시키는 것 이라고 이해하시면 됩니다.

dispatch 라는 함수에는 액션을 파라미터로 전달합니다. -> dispatch(action) 

그렇게 호출을 하면, 스토어는 리듀서 함수를 실행시켜서 해당 액션을 처리하는 로직이 있다면 액션을 참고하여 새로운 상태를 만들어줍니다.