<리액트를 다루는 기술> 16장: 리덕스 라이브러리 이해하기

21-22/21-22 리액트 스타터 -2

by dev otcroz 2022. 1. 31. 13:00

728x90

INDEX

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

리덕스를 왜 사용하는가?

컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 효율적으로 관리 가능

-컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값 전달, 업데이트 가능

::전역 상태를 관리할 때 매우 효율적

*리덕스 라이브러리 이해하기

핵심 키워드 알아보기
Parcel로 프로젝트 구성하기
토글 스위치와 카운터 구현하기

16.1 개념 미리 정리하기

16.1.1 액션

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

-액션 객체는 type 필드를 반드시 가지고 있어야 한다.

{
	type: 'TOGGLE_VALUE'
}

16.1.2 액션 생성 함수

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

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


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

매번 액션 객체를 직접 작성할 경우 실수가 있을 수 있으며 번거로워서 이를 함수로 만들어서 관리한다.

16.1.3 리듀서

리듀서는 변화를 일으키는 함수이다.

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

-그 후 두 값을 참고해서 새로운 상태를 만든다.

const initialState = {
  counter: 1
};

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

16.1.4 스토어

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

*한 개의 프로젝트는 단 하나의 스토어만 가질 수 있다.

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

16.1.5 디스패치

스토어의 내장 함수 중 하나

'액션을 발생시키는 것'이라고 생각하면 된다.

dispatch(action)와 같은 형태로 액션 객체를 파라미터로 넣어서 호출한다.

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

16.1.6 구독

스토어의 내장 함수 중 하나

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

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

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

16.2 리액트 없이 쓰는 리덕스

리덕스는 리액트에서 사용하려고 만들었지만, 실제로 다른 UI 라이브러리/프레임워크와 함께 사용할 수 있다.

vue에서는 리덕스와 유사한 vuex를 주로 사용한다.

-리덕스는 바닐라 자바스크립트와 함께 사용도 가능하다.

(바닐라 자바스크립트란 라이브러리나 프레임워크 없이 사용하는 순수 자바스크립트 그 자체)

16.2.1 Parcel로 프로젝트 만들기

$ yarn global add parcel-bundler

# npm install -g parcel-bundler

프로젝트 디렉터리를 생성한 후 package.json 파일을 생성한다.

$ 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

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>

이렇게 UI를 구성해보았다.

16.2.3 DOM 레퍼런스 만들기

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

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 초깃값 설정

*초깃값의 형태는 자유

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 값을 받아 온다.

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이다.

->state가 undefined일 때는 initialState를 기본값으로 사용한다.

리듀서에서는 상태의 불변성을 유지하면서 데이터에 변화를 일으켜야 한다.(최대한 깊지 않은 구조로)

if, 객체의 구조가 복잡해지거나 배열을 다룰 경우..

-immer라이브러리를 사용하면 편리하다.

16.2.7 스토어 만들기

스토어를 만들 때는 createStore함수를 사용한다.

함수의 파라미터에는 리듀서 함수를 넣는다.

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

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

const store = createStore(reducer);

16.2.8 render 함수 만들기

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

index.js

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

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

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 함수의 파라미터로는 함수 형태의 값을 전달해 준다.

-> 이렇게 전달된 함수는 액션이 발생해서 업데이트될 때마다 호출된다.

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

const unsubscribe = store.subscribe(listener);

unsubscribe();

상태가 업데이트될 때마다 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
};

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

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

16.2.10 액션 발생시키기

디스패치: 액션을 발생시키는 것

-스토어의 내장 함수인 dispatch를 사용

index.js

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

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

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

divToggle.onclick = () => {
    store.dispatch(toggleSwitch());
};

btnIncrease.onclick = () => {
    store.dispatch(increase(1));
};

btnDecrease.onclick = () => {
    store.dispatch(decrease());
};

16.3 리덕스의 세 가지 규칙

16.3.1 단일 스토어

하나의 애플리케이션 안에는 하나의 스토어가 들어있다.

-> 업데이트가 빈번하거나, 애플리케이션의 특정 부분을 완전히 분리시킬 때 여러 개의 스토어를 만들 수 있지만 권장하지 않는다.

16.3.2 읽기 전용 상태

**리덕스 상태는 읽기 전용이다.

->상태를 업데이트 할 때 기존의 객체는 건드리지 않고 새로운 객체를 생성해 주어야 한다.

WHY?

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

16.3.3 리듀서는 순수한 함수

변화를 일으키는 리듀서 함수는 순수한 함수이어야 한다.

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

-파라미터 외의 값에는 의존하면 안된다.

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

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

*** 네트워크 요청과 같은 비동기 작업은 미들웨어를 통해 관리한다.

Question 개념 및 코드 문제

● 개념 복습 문제

1. 액션 객체는 (type필드)를 반드시 가지고 있어야 한다.

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

3. (리듀서)는 변화를 일으키는 함수이다. (리덕스)는 리액트에서 사용하려고 만들었지만, 실제로 다른 UI 라이브러리/프레임워크와 함께 사용할 수 있다.

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

5. 액션 이름을 정의할 때는 (문자열 형태)로, (대문자로 작성), (액션이름은 고유)해야 한다.

6. 스토어를 만들 때는 (createStore)함수를 사용한다. 함수의 파라미터에는 (리듀서 함수)를 넣는다.

7. 리덕스의 세 가지 규칙은 (단일 스토어), (읽기 전용 상태), (순수한 함수) 이다.

● 코드 문제

1. 위 액션이름을 사용하여 액션 객체를 만드는 액션 생성 함수를 작성해 보시오.

2.dispatch를 이용해서 divToggle, btnIncrease, btnDecrease에 클릭 이벤트를 설정하시오.

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

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

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

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 React Starter #2

Editor 성민

728x90

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

<리액트를 다루는 기술> 17장: 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기 (0)	2022.01.31
<리액트를 다루는 기술> 13장: 리액트 라우터로 SPA 개발하기 (0)	2022.01.24
<리액트를 다루는 기술> 12장: immer를 사용하여 더 쉽게 불변성 유지하기 (0)	2022.01.17
<리액트를 다루는 기술> 11장: 컴포넌트 성능 최적화 (0)	2022.01.17
<리액트를 다루는 기술> 10장: 일정 관리 웹 애플리케이션 만들기 (0)	2022.01.10

고정 헤더 영역

메뉴 레이어

메뉴 리스트

검색 레이어

검색 영역

상세 컨텐츠

본문 제목

본문

INDEX

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

1.개념 미리 정리하기

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

3. 리덕스의 세 가지 규칙

4. Question 개념 및 코드 문제

리덕스를 왜 사용하는가?

16.1 개념 미리 정리하기

16.1.1 액션

16.1.2 액션 생성 함수

16.1.3 리듀서

16.1.4 스토어

16.1.5 디스패치

16.1.6 구독

16.2 리액트 없이 쓰는 리덕스

16.2.1 Parcel로 프로젝트 만들기

16.2.2 간단한 UI 구성하기

16.2.3 DOM 레퍼런스 만들기

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

16.2.5 초깃값 설정

*초깃값의 형태는 자유

16.2.6 리듀서 함수 정의

16.2.7 스토어 만들기

16.2.8 render 함수 만들기

16.2.9 구독하기

16.2.10 액션 발생시키기

16.3 리덕스의 세 가지 규칙

16.3.1 단일 스토어

16.3.2 읽기 전용 상태

16.3.3 리듀서는 순수한 함수

Question 개념 및 코드 문제

● 개념 복습 문제

● 코드 문제

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

관련글 더보기

추가 정보

인기글

최신글

티스토리툴바