FRONT-END/REACTJS

리덕스 라이브러리

JINGMONG 2022. 2. 19. 22:21

리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러리이다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다.

컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트할 수 있다.

액션

상태에 어떠한 변화가 필요하면 액션이란 것이 발생한다. 이는 하나의 객체로 표현 되는데, 액션 객체는

{
  type: 'TOGGLE_VALUE'
}

와 같은 형식으로 이루어져 있다.

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

{
  type: 'ADD_TODO',
  data: {
    id: 1,
    text: '리덕스 배우기'
  }
}
{
  type: 'CHANGE_INPUT',
  text: '안녕하세요'
}

액션 생성 함수

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

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

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

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

리듀서

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

const initialState = {
  counter: 1
};

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

스토어

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

디스패치

디스패치는 스토어의 내장 함수 중 하나이다. 디스패치는 ‘액션을 발생시키는 것’이라고 이해하면 된다. 이 함수는 dispatch(action)의 형태로 액션 객체를 파라미터로 넣어서 호출한다.

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

구독

구독도 스토어의 내장 함수 중 하나이다. subcribe 함수 안에 리스너 함수를 파라미터로 넣어서 호출해 주면, 이 리스너 함수가 액션이 디스패치 되어 상태가 업데이트될 때마다 호출된다.

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

unsubscribe();

리액트 없이 쓰는 리덕스

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="index.css" type="text/css" />
    <title>Document</title>
  </head>
  <body>
    <div class="toggle"></div>
    <hr />
    <h1>0</h1>
    <button id="increase">+1</button>
    <button id="decrease">-1</button>
    <script src="./index.js"></script>
  </body>
</html>

DOM 레퍼런스

const divToggle = document.querySelector(".toggle");
const counter = document.querySelector("h1");
const btnIncrease = document.querySelector("#increase");
const btnDecrease = document.querySelector("#decrease");

액션 타입과 액션 생성 함수 정의

const TOGGLE_SWITCH = "TOGGLE_SWITCH";
const INCREASE = "INCREASE";
const DECREASE = "DECREASE";

const toggleSwitch = () => ({ type: TOGGLE_SWITCH });
const increase = (difference) => ({ type: INCREASE, difference });
const decrease = () => ({ type: DECREASE });

초깃값 설정

초깃값의 형태는 자유이다. 숫자, 문자열, 객체 모두 가능하다.

const initialState = {
  toggle: false,
  counter: 0,
};

리듀서 함수 정의

function reducer(state = initialState, action) {
  switch (action.type) {
    case TOGGLE_SWITCH:
      return {
        ...state,
        toggle: !state.toggle,
      };
    case INCREASE:
      return {
        ...state,
        counter: state.counter + action.difference,
      };
    case DECREASE:
      return {
        ...state,
        counter: state.counter - 1,
      };
    default:
      return state;
  }
}

리듀서 함수가 맨 처음 호출 될 때는 state 값이 undefined이다. 해당 값이 undefined로 주어졌을 때 initialState를 기본값으로 설정하기 위해 함수의 파라미터 쪽에 기본값이 설정되어 있다.

리듀서에서는 상태의 불변성을 유지하면서 데이터에 변화를 일으켜 주어야 한다. 이 작업을 할때 spread 연산자(...)를 사용하면 편하다. 단, 객체의 구조가 복잡해지면 spread 연산자로 불변성을 관리하며 업데이트하는 것이 굉장이 번거로울 수 있고 코드의 가독성도 나빠지기 때문에 리덕스의 상태는 최대한 깊지 않은 구조로 진행하는 것이 좋다.

스토어 만들기

const store = createStore(reducer);

render 함수 만들기

const render = () => {
  const state = store.getState();
  if (state.toggle) {
    divToggle.classList.add("active");
  } else {
    divToggle.classList.remove("active");
  }
  counter.innerText = state.counter;
};

render();

구독하기

store.subscribe(render);

액션 발생시키기

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

리덕스의 규칙

  1. 단일 스토어 하나의 애플리케이션 안에는 하나의 스토어가 들어 있다. 여러개의 스토어를 만들 수 는 있지만 관리가 복잡해지므로 권장하지 않는다.
  2. 읽기 전용 상태 리덕스 상태는 읽기 전용이다. 기존의 리액트에서 setState를 사용하여 state를 업데이트 할 때도 객체나 배열을 업데이트하는 과정에서 불변성을 지켜 주기 위해 spread 연산자를 사용하나 immer와 같은 불변성 라이브러리를 사용하였다. 리덕스도 상태를 업데이트 할 때 기존의 객체는 건드리지 않고 새로운 객체를 생성해 주어야 한다.
  3. 리듀서는 순수한 함수 변화를 일으키는 리듀서 함수는 순수한 함수여야 한다.
    • 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받는다
    • 파라미터 외의 값에는 의존하면 안 된다.
    • 이전 상태는 절대로 건드리지 않고 변화를 준 새로운 상태 객체를 만들어서 반환한다.
    • 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과 값을 반환해야 한다.
    리듀서 함수 내부에서 랜던 값을 만들거나, Date 함수를 사용하여 현재 시간을 가져오거나, 네트워크 요청을 한다면, 파라미터가 같아도 다른 결과를 만들어낼 수 있기 때문에 사용하면 안된다.

'FRONT-END > REACTJS' 카테고리의 다른 글

Render Props pattern  (0) 2023.02.22
StoryBook  (0) 2022.03.05
Context API  (0) 2022.02.19
react 비동기 작업  (0) 2022.02.19
react route로 SPA 개발  (0) 2022.02.19

'FRONT-END/REACTJS'의 다른글

  • 현재글리덕스 라이브러리

관련글

댓글

티스토리툴바