[리액트를 다루는 기술] 16장 리덕스 라이브러리 이해하기

21-22/21-22 리액트 마스터

by 도리에몽 2022. 1. 17. 13:00

728x90

리덕스 : 리액트 상태 관리 라이브러리

컴포넌트의 상태 업데이트 관련 로직 분리
컴포넌트 상태 똑같게 공유 시, 여러 컴포넌트를 거치지 않고 상태 값 전달 및 업데이트 가능

전역 상태 관리 시, 효과적
코드의 유지 보수성 높여 줌
작업 효율 극대화
편리한 개발자 도구 지원
미들웨어 기능 제공하여 비동기 작업 효율적 관리 가능

16.1 개념 미리 정리하기

1) 액션

상태에 변화가 필요하면 액션이 발생

액션은 객체로 표현되며, type 필드(액션의 이름)를 반드시 가지고 있어야 함

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

2) 액션 생성 함수

액션 객체를 만들어주는 함수

→ 직접 작성하기 번거롭거나, 실수하는 일을 방지하기 위함

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

//화살표 함수로 나타내기
const changeInput = text => ({
	type: 'CHANGE_INPUT',
	text
});

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

스토어의 내장 함수 중 하나

‘액션을 발생시키는 것’

dispatch(action) : 액션 객체를 파라미터로 넣어서 호출

⇒ 호출되면, 스토어는 리듀서 함수를 실행시켜 새로운 상태 생성

6) 구독

스토어의 내장 함수 중 하나

subscribe(listener) : 리스너 함수가 디스패치되어 상태 업데이트될 때마다 호출됨

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

unsubscribe();

16.2 리액트 없이 쓰는 리덕스

리덕스는 리액트에 종속되는 라이브러리가 아님

바닐라 자바스크립트와 함께 사용 가능

💡 바닐라 자바스크립트 : 라이브러리나 프레임워크 없이 사용하는 순수 자바스크립트

Parcel로 프로젝트 만들기

Parcel → 쉽고 빠르게 웹 애플리케이션 프로젝트 구성 가능

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

<!-- index.html -->
<html>

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

</html>

// index.js
console.log('hello parcel');

#개발용 서버 실행
$ parcel index.html
#리덕스 모듈 설치
$ yarn add redux

간단한 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>

DOM 레퍼런스 만들기

자바스크립트 파일 상단에 수정할 DOM 노드를 가리키는 값을 미리 선언해 줌

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

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

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

초깃값 설정

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

리듀서 함수 정의

리듀서는 상태의 불변성 유지를 하며 데이터 변화를 일으켜야 함

spread 연산자를 사용하면 편리하지만 구조가 복잡해지면 번거로울 수 있으므로 상태를 최대한 깊지 않은 구조로 진행하거나, immer 라이브러리를 사용하면 더 쉽게 리듀서 작성 가능

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

스토어 만들기

// index.js
import { createStore } from 'redux';

(...)

const store = createStore(reducer);

render 함수 만들기

render 함수 : 상태가 업데이트될 때마다 호출됨.

리액트의 render함수와는 달리 이미 html으로 만들어진 UI의 속성을 상태에 따라 변경해줌

// index.js
(...)

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();

액션 발생시키기 (=디스패치)

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

16.3 리덕스의 세 가지 규칙

1. 단일 스토어

하나의 애플리케이션 안에는 일반적으로 하나의 스토어

여러 개의 스토어를 만들 수도 있지만, 상태 관리가 복잡해지므로 권장하지 않음

2. 읽기 전용 상태

리덕스 상태는 불변성 유지를 위해 상태 업데이트 시,

기존의 객체는 건드리지 않고, 새로운 객체를 생성해 주어야 함

💡 리덕스에서 불변성을 유지해야 하는 이유
→ 내부적으로 데이터가 변경되는 것을 감지하기 위해 얕은 비교 검사를 하기 때문에

3. 리듀서는 순수한 함수

변화를 일으키는 리듀서 함수는 순수한 함수여야 함

순수한 함수의 조건

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

※ 파라미터가 같아도 다른 결과를 만들어 낼 수 있는 네트워크 요청과 같은 비동기 작업은 리듀서 함수가 아닌 미들웨어를 통해 관리해야 함

QUIZ

Q1. 프로젝트에 리덕스를 작용하기 위한 것으로, 하나의 애플리케이션 안에는 하나의 (______)만 가질 수 있다.

답 : 스토어

Q2. 스토어의 내장 함수 중 하나로, 액션을 발생시키는 함수는 무엇인가?

답 : 디스패치

Q3. 리듀서 함수는 다른 결과를 만들어내는 네트워크 요청과 같은 비동기 작업을 처리하는데 효율적이다.

답 : X

728x90

'21-22 > 21-22 리액트 마스터' 카테고리의 다른 글

19장 코드 스플리팅 (0)	2022.01.24
18장 리덕스 미들웨어를 통한 비동기 작업 관리 (0)	2022.01.24
[리액트를 다루는 기술] 17장 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기 (0)	2022.01.17
[리액트를 다루는 기술] 15장 Context API (0)	2022.01.10
[리액트를 다루는 기술] 14장 외부 API를 연동하여 뉴스 뷰어 만들기 (0)	2022.01.03

고정 헤더 영역

메뉴 레이어

메뉴 리스트

검색 레이어

검색 영역

상세 컨텐츠

본문 제목

본문