[말로 풀어쓴 React] 리덕스 라이브러리 이해하기

DongGu·2021년 1월 28일
0

말로 풀어쓴 리액트

목록 보기
8/11

목차

  • 개념 미리 정리하기
  • 리액트 없이 쓰는 리덕스
  • 리덕스의 세 가지 규칙

개념 미리 정리하기

  • 1.1) 액션
    상태에 어떤 변화가 필요하면 액션(action)이 발생한다. 이는 하나의 객체로 표현된다. 액션 객체는 type 필드를 반드시 갖고 있어야 한다. 이 값을 액션의 이름이라고 생각하면 된다. 그 외의 값들은 나중에 상태 업데이트를 할 때 참고해야 할 값이며, 작성자 마음대로 넣을 수 있다.
{
  type: "ADOO_TODO",
  data: {
    id: 1,
    text: "리덕스 배우기"
  }
}
  • 1.2) 액션 생성 함수
    액션 생성 함수(action creator)는 액션 객체를 만들어주는 함수다. 어떤 변화를 일으켜야 할 때마다 액션 객체를 만들어야 하는데, 매번 액션 객체를 직접 생성하기 번거로울 수도 있고 만드는 과정에서 실수로 정보를 놓칠 수도 있다. 이런 실수를 방지하기 위해 함수로 만들어 관리한다.
function addTodo(data){
  return {
    type: "ADD_TODO",
    data
  };
}

const changeInput = text => ({
  type: "CHANGE_INPUT",
  text
});
  • 1.3) 리듀서(reducer)
    리듀서(reducer)는 변화를 일으키는 함수다. 액션을 만들어서 발생시키면, 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아온다. 두 값을 참고하여 새로운 상태를 만들어서 반환해준다.
const initialState = {
  counter: 1
};

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

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

  • 1.5) 디스패치(dispatch)
    디스패치는 스토어의 내장 함수 중 하나다. 디스패치는 '액션을 발새이키는 것'이라고 이해하면 된다. 이 함수는 dispatch(action)과 같은 형태로 액션 객체를 파라미터로 넣어서 호출한다. 이 함수가 호출되면 스토어는 리듀서 함수를 실행시켜 새로운 상태를 만들어 준다.

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

const listener = () => {
  console.log('상태가 업데이트됨');
}
const unsubscribe = store.subscribe(listener);
unsubscribe(); // 추후 구독을 비활성화할 때 함수를 호출

2. 리액트 없이 쓰는 리덕스

리덕스는 리액트에 종속되는 라이브러리가 아니다. 리액트에서 사용하려고 만들어졌지만, 실제로 다른 UI 라이브러리/프레임워크와 함께 사용될 수도 있다.
리덕스는 바닐라 자바스크립트에도 쓰일 수 있다. 바닐라 자바스크립트 환경에서 리덕스를 사용하여 리덗의 핵심 기능과 작동원리를 이해해보자.

  • 2.1) Parcel로 프로젝트 만들기
  • 2.2) 간단한 UI 구성하기
    $ yarn global add parcel-bundler
    $ mkdir vanila-redux
    $ yarn init -y
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="index.css" />
  </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>
.toggle {
  border: 2px solid black;
  width: 64px;
  height: 64px;
  border-radius: 32px;
  box-sizing: border-box;
}

.toggle.active {
  background: yellow;
}
  • 2.3) 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 toggleSwtich = () => ({ type: TOGGLE_SWITCH });
const increase = (difference) => ({ type: INCREASE, difference });
const decrease = () => ({ type: DECREASE });
  • 2.4) 액션 타입과 액션 생성 함수 정의
  • 2.5) 초기값 설정
    프로젝트의 상태에 변화를 일으키는 것을 액션이라고 한다. 액션 이름은 문자열 형태로, 주로 대문자로 작성하며 액션 이름은 고유해야 한다. 이름이 중복되면 의도하지 않은 결과가 발생할 수 있다.

이 액션을 사용하여 액션 객체를 만드는 액션 생성 함수를 작성해준다. 액션 객체는 type값을 반드시 갖고 있어야 하며, 그 외에 추후 상태를 업데이트할 때 참고하고 싶은 값은 여러분 마음대로 넣을 수 있다.

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 toggleSwtich = () => ({ type: TOGGLE_SWITCH });
const increase = (difference) => ({ type: INCREASE, difference });
const decrease = () => ({ type: DECREASE });

const initalState = {
  toggle: false,
  counter: 0,
};
  • 2.6) 리듀서 함수 정의
    리듀서는 변화를 일으키는 함수이다. 함수 파라미터로는 state와 action값을 받아온다.
// index.js
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 toggleSwtich = () => ({ type: TOGGLE_SWITCH });
const increase = (difference) => ({ type: INCREASE, difference });
const decrease = () => ({ type: DECREASE });

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

// state가 undefined일 때는 initialState를 기본 값으로 사용
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;
  }
}
  • 2.7) 스토어 만들기
    스토어를 만들 때는 createStore함수를 사용한다. 이 함수를 사용하려면 리덕스에서 createStore를 임포트해왕하고, 함수의 파라미터에는 리듀서 함수를 넣어줘야 한다.
// index.js
import { createStore } from "redux";
(...)
const store = createStore(reducer);
  • 2.8) render 함수 만들기
    render 함수는 상태가 업데이트될 때마다 호출되며, 리액트의 render 함수와는 다르게 이미 html을 사용하여 만들어진 UI의 속성을 사애텡 따라 변경해준다.
// index.js

const render = () => {
  const state = store.getState(); // 현재 상태를 불러온다.
  if (state.toggle) {
    divToggle.classList.add("active");
  } else {
    divToggle.classList.remove("active");
  }
  // 카운터 처리
  counter.innerText = state.counter;
};

render();
  • 2.9) 구독하기
    스토어 상태가 바뀔 때마다 방금 마든 render 함수가 호출되도록 해줄 것이다. 이 작업은 스토어의 내장 함수 subscribe를 사용하여 수행할 수 있다.

subscribe 함수의 파라미터로는 함수 형태의 값을 전달해준다. 이렇게 전달된 함수는 추후 액션이 발생하여 상태가 업데이트될때마다 호출해준다.

이번 프로젝트에서는 subscribe 함수를 직접사용하지만 추후 리액트 프로젝트에서 리덕스를 사용할 때는 이 함수를 직접 사용하지 않을 것입니다. 왜냐하면 컴포넌트에서 리덕스 상태를 조호하는 과정에서 react-redux라는 라이브러리가 이 작업을 대신해주기 때문이다.

이제 상태가 업데이트될 때마다 render함수를 호출하도록 코드를 작성해보자.

// 예시코드
const listner =() => {
	console.log('상태가 업데이트됨');
}
const unsubscribe = store.subscribe(listenr);
unsubscribe(); // 추후 구독을 비활성화할 때 함수를 호출
  • 2.10) 액션 발생시키기
    액션을 발생시키는 것을 디스패치라고 한다. 디스패치를 할 떄는 스토어 내장함수 dispatch를사용한다. 파라미터는 액션 객체를 넣어주면 된다.

다음과 같이 각 DOM 요소에 클릭 이벤트를 설정하세요. 이벤트 함수 내부에서는 dispatch 함수를 사용하여 액션을 스토어에게 전달해주겠다.

3. 리덕스의 세 가지 규칙

  • 3.1) 단일 스토어
    하나의 애플리케이션 안에는 하나의 스토어가 들어가 있다. 사실 여러 개의 스토어를 사용하는 것이 완전히 불가능하지는 않다. 특정 업데이트가 너무 빈번하게 일어나거나 애플리케이션의 특정 부분을 완전히 분리시킬 때 여러 개의 스토어를 만들 수도 있지만, 상태 관리가 복잡해질 수 있으므로 권장하지 않는다.

  • 3.2) 읽기 전용 상태
    리덕스 상태는 읽기 전용이다. 기존에 리액트에서 setState를 사용하거나 state를 업데이트할 때도 객체나 배열을 업데이트하는 과정에서 불변성을 지켜주기 위해 spread 연산자를 사용하거나 imer와 같은 불변성 관리 라이브러리를 사용했다. 리덕스도 마찬가지다. 상태를 업데이트할 때 기존의 객체는 건드리지 않고 새로운 객체를 생성해줘야 한다.
    리덕스에서 불변성을 유지해야 하는 이유는 내부적으로 데이터가 변경되는 것을 감지하기 위해 얕은 비교 검사를 하기 때문이다. 객체의 변화를 감지할 때 객체의 깊숙한 안쪽까지 비교하는 것이 아니라 겉핥기 식으로 비교하여 좋은 성능을 유지할 수 있는 것이다.

  • 3.3) 리듀서는 순수한 함수
    변화를 일으키는 리듀서 함수는 순수한 함수여야 한다. 순수한 함수는 다음 조건을 만족한다.

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

    리듀서를 작성할 떄는 위 네 가지 사항을 주의해야 한다. 예를 들어 리듀서 함수 내부에서 랜덤 값을 만들거나, Date 함수를 사용하여 현재 시간을 가져오거나, 네트워크 요청을 한다면 파라미터가 같아도 다른 결과를 만들어 낼 수 있기 때문에 사용하면 안 된다. 이러한 작업은 리듀서 함수 바깥에서 처리해줘야 한다. 액션을 만드는 과정에서 처리해도 되고, 추후 배울 리덕스 미들웨어에서 처리해도 된다. 주로 네트워크 요청과 같은 비동기작업은 미들웨어를 통해 관리한다.

profile
DongGu
코딩하는 신방과생
이전 포스트

[말로 풀어쓴 React] Context API

다음 포스트

[말로 풀어쓴 React] 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기1

0개의 댓글