리액트를 다루는 기술 _ 16장

이제 50% 다 와간다... 와우!

---

16장. 리덕스 라이브러리 이해하기

앞서 얼핏 들었던 리덕스! React 상태 관리에서 가장 많이 사용되는 녀석이다.

 

16-1) 개념 정의하기

난생처음 접하는 여러 키워드들이 등장한다..!

1. 액션

상태에 어떤 변화가 필요하면 액션(action)이란 것이 발생한다.

얘는 하나의 객체 형태며

{
	type: 'TOGGLE_VALUE'
}

요런 형식으로 이뤄져 있다.

 

액션 객체는 type 필드를 반드시 가지고 있어야 하며(얘를 액션의 이름이라 생각하면 된다),

그 이외에는 이후 상태 업데이트를 할 때 참고해야 할 값들이 들어간다. (작성자 임의로 넣으면 됨!)

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

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

이런 식으로..!

 

2. 액션 생성 함수

액션 생성 함수(action creator)는 액션 객체를 만들어 주는 함수다.

 

어떤 변화를 일으켜야 할 때마다 액션 객체를 만들어야 하는데,

매번 액션 객체를 직접 작성할 수는 없으니(귀찮고 실수 가능성도 있으니까), 함수로 만들어 관리하는 것!

 

3. 리듀서

리듀서(Reducer)는 변화를 일으키는 함수.

액션을 만들어서 발생시키면 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아 온다.

요 두 값을 참고해 새로운 상태를 만들어 반환!

 

4. 스토어

프로젝트에 리덕스를 적용하기 위해 스토어(store)를 만든다.

한 개의 프로젝트는 단 하나의 스토어만 가질 수 있으며

스토에 안에는 현재 애플리케이션 상태, 리듀서, 이외의 여러 중요한 내장 함수 가 들어 있다.

 

5. 디스패치

디스패치(dispatch)는 스토어의 내장 함수 중 하나. 액션을 발생시키는 것으로 이해하면 된다.

dispatch(action)과 같은 형태로 액션 객체를 파라미터로 넣어 호출!

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

 

6. 구독

구독(subcribe) 역시 스토어의 내장 함수 중 하나!

subscribe 함수 안에 리스너 함수를 파라미터로 넣어 호출해 주면,

이 리스너 함수가 액션이 디스패치되어 상태가 업데이트될 때마다 호출된다.

 

16-2) 리액트 없이 쓰는 리덕스

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

바닐라 자바스크립트(라이브러리 or프레임워크 없이 사용하는 순수 JS) 환경에서 리덕스를 사용해보자.

 

1. Parcel로 프로젝트 만들기

create react-app이 아니라... Parcel이란 도구를 통해 웹 애플리케이션 프로젝트를 구성해보자.

 

npm install -g parcel-bundler // parcel-bundler 설치(global로 설치해야 정상 작동)

mkdir vanilla-redux

cd vanilla-redux

yarn init -y // package.json 생성

index.html & index.js & index.css 생성

parcel index.html // 실행

 

2. UI 구성하기

index.html & index.css

 

3. redux 사용해보기

import { createStore } from "redux";

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

// 액션 생성 함수 작성
// -> 액션 객체는 type 값 반드시 가져야! (그 이외는 값은 마음대로)
const toggleSwitch = () => ({ type: TOGGLE_SWITCH });
const increase = (difference) => ({ type: INCREASE, difference });
const decrease = () => ({ type: DECREASE });

// 초깃값 정의
const initialState = {
  toggle: false,
  counter: 0,
};

// 리듀서 함수(변화를 일으키는 함수 <- state와 action 받음) 정의
function reducer(state = initialState, action) {
  // state가 undefined일 때는(리듀서 함수 맨 처음 호출시 undefined임) initialState를 기본값으로 사용

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

// 스토어 만들기(redux의 createStore 필요)
const store = createStore(reducer);

// 스토어 내장 함수 사용하기
// 1) render 함수 : 상태가 업데이트 될 때마다 호출, 이미 html을 사용해 만들어진 UI 속성을 상태에 따라 변경
const render = () => {
  const state = store.getState(); // 현재 상태 불러옴

  // 토글 처리
  if (state.toggle) {
    divToggle.classList.add("active");
  } else {
    divToggle.classList.remove("active");
  }

  // 카운터 처리
  counter.innerHTML = state.counter;
};

render();
store.subscribe(render);
// 상태가 업데이트 될 때마다 render 함수를 호출

// 2) subscribe 함수 : 스토어의 상태가 바뀔 때마다 render 함수를 호출(=구독하기)
const listener = () => {
  console.log("상태가 업데이트 됨");
};
const unsubscribe = store.subscribe(listener);

unsubscribe(); // 나중에 구독을 비활성화할 때 함수를 호출
// 여기서는 subscribe 함수를 사용하지만, React에서는 react-redux라는 라이브러리가 이를 대신해줌

// 액션 발생시키기 = 디스패치
// -> 스토어의 내장 함수 dispatch 사용 - 파라미터는 액션 객체
divToggle.onclick = () => {
  // DOM 요소에 클릭 이벤트 설정

  store.dispatch(toggleSwitch());
  // 액션을 스토어에 전달! (변화 발생했어~)
};
btnIncrease.onclick = () => {
  store.dispatch(increase(1));
};
btnDecrease.onclick = () => {
  store.dispatch(decrease());
};

무지막지하게 길어 코드 및 주석으로 대체..!

 

16-3) 리덕스의 세 가지 규칙

1. 단일 스토어

하나의 애플리케이션에는 하나의 스토어만 들어갈 수 있도록!

 

2. 읽기 전용 상태

Redux 상태는 읽기 전용이다!

React의 객체 및 배열 업데이트와 마찬가지로,

Redux도 상태를 업데이트할 때 기존 객체를 건드리지 않고 새로운 객체를 생성해 줘야 한다.

 

왜? → Redux 내부적으로 데이터가 변경되는 것을 감지하기 위해 얕은 비교 검사를 하기 때문.

객체의 변화를 감지할 때 겉핥기식으로 비교하여(깊은 안쪽까지 비교 x) 좋은 성능을 유지할 수 있다.

 

3. 리듀서는 순수한 함수

리듀서 ← 변화를 일으키는 함수 - 얘는 순수한 함수여야 한다.

 

그럼 순수한 함수란?

- 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받음

- 파라미터 외의 값에는 의존하면 안 됨

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

- 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과 값 반환

요 조건들을 만족해야 한다!

 

만족 못하는 경우가 있나?

ex) 리듀서 함수 내부에서 랜덤 값 만듦 / Date 함수로 현재 시간 가져옴 / 네트워크 요청 보냄

→ 이러한 작업은 리듀서 함수 바깥에서 처리해 줘야 한다!