상세 컨텐츠

본문 제목

[리액트 스타터 3] 16장. 리덕스 라이브러리 이해하기

22-23/22-23 리액트 스타터 3

by 케이비이 2023. 1. 12. 10:00

본문

728x90

16.1 개념 미리 정리하기

(1)  액션

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

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

{
  type: 'ADD_TODO',
  data: {
    id: 1,
    text: '리덕스 배우기'
	}
}

(2) 액션 생성 함수

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

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

(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) 디스패치

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

(6) 구독

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

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

}
const unsubscribe = store.subscribe(listener);


unsubscribe(); // 추후 구독을 비활성화할 때 함수를 호출

 

16.2 리액트 없이 쓰는 리덕스

리덕스는 리액트에 종속되는 라이브러리가 아닙니다. 리액트에서 사용하려고 만들어졌지만 실제로 다른 UI 라이브러리/프레임워크와 함께 사용할 수도 있습니다.

리덕스는 바닐라 자바스크립트와 함께 사용할 수도 있습니다. 바닐라 자바스크립트는 라이브러리나 프레임워크 없이 사용하는 순수 자바스크립트 그 자체를 의미합니다. 이번에는 바닐라 자바스크립트 환경에서 리덕스를 사용하여 리덕스의 핵심 기능과 작동 원리를 이해해 보겠습니다.

 

16.2.1 Parcel로 프로젝트 만들기

프로젝트를 구성하기 위해 Parcel이라는 도구를 사용하겠습니다.

$ yarn global add parcel-bundler
$ mkdir vanilla-redux
$ cd vanilla-redux
$ yarn init -y

index.html과 index.js 파일을 만들어 줍니다.

<index.html>

<html>
  <body>
    <div>바닐라 자바스크립트</div>
    <script src="./index.js"></script>
  </body>
</html>

<index.js>

console.log('hello parcel');

개발용 서버를 실행해 줍니다.

$ parcel index.html

yarn을 사용하여 리덕스 모듈을 설치하세요.

$ yarn add redux

16.2.2 간단한 UI 구성하기

<index.css>

.toggle {
  border: 2px solid black;
  width: 64px;
  height: 64px;
  border-radius: 32px;
  box-sizing: border-box;
}

.toggle.active {
  background: yellow;
}

<index.html>

<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>

16.2.3 DOM 레퍼런스 만들기

UI를 관리할 때 별도의 라이브러리를 사용하지 않기 때문에 DOM을 직접 수정해 주어야 합니다.

 

<index.js>

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

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

프로젝트의 상태에 변화를 일으키는 것을 액션이라고 합니다. 액션 이름은 문자열 형태로, 주로 대문자로 작성하며 액션 이름은 고유해야 합니다.

<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';

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

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

16.2.5 초깃값 설정

이 프로젝트에서 사용할 초깃값을 정의해 주겠습니다. 초깃값의 형태는 자유입니다. 숫자일 수도 있고, 문자열일 수도 있고, 객체일 수도 있습니다.

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

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

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

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

// state가 undefined일 때는 initialState를 기본값으로 사용
function reducer(state = initialState, action) {
  // action.type에 따라 다른 작업을 처리함
  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 연산자(…)를 사용하면 편합니다.

16.2.7 스토어 만들기

스토어를 만들 때는 createStore 함수를 사용합니다. 이 함수를 사용하려면 코드 상단에 import 구문을 넣어 리덕스에서 해당 함수를 불러와야 하고, 함수의 파라미터에는 리듀서 함수를 넣어 주어야 합니다.

16.2.8 render 함수 만들기

render 함수 상태가 업데이트될 때마다 호출되며, 리액트의 render 함수와는 다르게 이미 html을 사용하여 만들어진 UI의 ,속성을 상태에 따라 변경해 줍니다.

<index.js>

import { createStore } from 'redux';

(...)

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



render();

16.2.9 구독하기

스토어의 상태가 바뀔 때마다 방금 만든 render 함수가 호출되도록 해 줄 것입니다. 이 작업은 스토어의 내장 함수 subscribe를 사용하여 수행할 수 있습니다. subscribe 함수의 파라미터로는 함수 형태의 값을 전달해 줍니다. 이렇게 전달된 함수는 추후 액션이 발생하여 상태가 업데이트될 때마다 호출됩니다.

<index.js>

(...)

render();
store.subscribe(render);

16.2.10 액션 발생시키기

액션을 발생시키는 것을 디스패치라고 합니다. 디스패치를 할 때는 스토어의 내장 함수 dispatch를 사용합니다. 파라미터는 액션 객체를 넣어 주면 됩니다.

<index.js>

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

16.3 리덕스의 세 가지 규칙

16.3.1 단일 스토어

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

16.3.2 읽기 전용 상태

리덕스 상태는 읽기 전용입니다. 상태를 업데이트할 때 기존의 객체는 건드리지 않고 새로운 객체를 생성해 주어야 합니다. 리덕스에서 불변성을 유지해야 하는 이유는 내부적으로 데이터가 변경되는 것을 감지하기 위해 얕은 비교 검사를 하기 때문입니다. 

16.3.3 리듀서는 순수한 함수

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

 

• 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받습니다.

• 파라미터 외의 값에는 의존하면 안 됩니다.

• 이전 상태는 절대로 건드리지 않고, 변화를 준 새로운 상태 객체를 만들어서 반환합니다.

• 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과 값을 반환해야 합니다.

 

Quiz

1. (액션) 이란 상태에 어떠한 변화가 필요하면 발생합니다.

2. 액션 객체를 만들어주는 함수는 (액션 생성 함수)입니다.

3. (리듀서)는 변화를 일으키는 함수입니다.

4. 프로젝트에 리덕스를 적용하기 위해 스토어를 만들며 한개의 프로젝트는 (하나)의 스토러를 가길 수 있습니다.

5. 액션을 발생시키는 것은 (디스패치)입니다.

6. subscribe 함수 안에 리스너 함수를 파라미터로 넣어서 호출해 주면, 이 리스너 함수가 액션이 (디스패치)되어 상태가 업데이트될 때마다 호출됩니다.

7. (리듀서)는 변화를 일으키는 함수입니다. 함수의 파라미터로는 (state)와 (action)값을 받아 옵니다.

8. 스토어를 만들기 위해 작성해야 하는 코드는 무엇인지 작성해보시오.

답:

import { createStore } from 'redux';

const store = createStore(reducer);

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

import { createStore } from 'redux';

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
};

// state가 undefined일 때는 initialState를 기본값으로 사용
function reducer(state = initialState, action) {
  // action.type에 따라 다른 작업을 처리함
  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;
  }
}

const store = createStore(reducer);
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);

Corner React3

Editor: 케이비

728x90

'22-23 > 22-23 리액트 스타터 3' 카테고리의 다른 글

[리액트 스타터 3] 17장. 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기  (0) 2023.01.12
[리액트 스타터 3] 13장. 리액트 라우터로 SPA 개발하기  (0) 2023.01.05
[리액트 스타터 3] 12장. immer를 사용하여 더 쉽게 불변성 유지하기  (0) 2022.12.29
[리액트 스타터 3] 11장. 컴포넌트 성능 최적화  (0) 2022.12.29
[리액트 스타터3] 10장. 일정 관리 웹 애플리케이션 만들기  (0) 2022.12.22

관련글 더보기

티스토리툴바