리덕스란?

리액트 상태 관리 라이브러리로 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 더욱 효율적으로 관리할 수 있습니다.

또한, 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트 할 수 있습니다.

리덕스 왜 쓸까?

예를 들어 아래와 같은 TodoList 프로젝트가 있다고 가정해보면

대부분의 작업에서 부모 컴포넌트가 중간자 역할을 하게 됩니다.

컴포넌트끼리 직접 소통하는 방법이 있긴 하지만, 그렇게 하면 코드가 꼬여버리기 때문에 권장하지 않는 방법이다.

이런식으로 App 컴포넌트를 거쳐서 건너건너 필요한 값을 업데이트하고, 리렌더링 하는 방식으로 프로젝트가 개발되면

부모 컴포넌트에서 모든걸 관리하고 아래로 내려주는 것이기 때문에, 직관적이기도 하고, 관리하는 것도 편하다고 생각할 수 있습니다.

그러나 문제는 앱의 규모가 커졌을 때 입니다.

이러한 구조에서는 컴포넌의 개수가 늘어나고, 다루는 데이터도 늘어나고, 그 데이터를 업데이트하는 함수가 늘어나면 App의 코드가 길어지고, 이에 따라 유지보수 하는 것도 힘들어 지게 된다.

Root 컴포넌트에서 G 컴포넌트에게 어떠한 값을 전달해 줘야 하는 상황에는 어떻게 해야 할까요?

A에서 E를 거쳐서 G로 와야합니다.

// App.js 에서 A 렌더링
<A value={5}>

// A.js 에서 E 렌더링
<E value={this.props.value} />

// B.js 에서 G 렌더링
<G value={this.props.value} />

그러다가 value 라는 이름을 anotherValue 라는 이름으로 바꾸는 일이 발생한다면? 파일 3개를 열어서 다 수정해줘야함.

리덕스를 쓰면, 상태 관리를 컴포넌트 바깥에서 한다!

리덕스를 사용하면 상태값을, 컴포넌트에 종속시키지 않고, 상태 관리를 컴포넌트의 바깥에서 관리 할 수 있게 됩니다.

예를 들어서 B 에서 일어나는 변화가 G 에 반영된다고 가정을 해보면

스토어 설정

리덕스를 프로젝트에 적용하게 되면 이렇게 스토어 라는 녀석이 생기는데, 스토어 안에는 프로젝트의 상태에 관한 데이터들이 담겨있습니다.

컴포넌트의 스토어 구독

G 컴포넌트는 스토어에 구독을 합니다. 구독을 하는 과정에서, 특정 함수가 스토어한테 전달이 됩니다. 그리고 나중에 스토어의 상태값에 변동이 생긴다면 전달 받았던 함수를 호출해줍니다.

스토어에 상태 변경하라고 알려주기

이제 B 컴포넌트에서 어떤 이벤트가 생겨서, 상태를 변화 할 일이 생겼습니다. 이 때 dispatch 라는 함수를 통하여 액션을 스토어한테 던져줍니다.

액션은 상태에 변화를 일으킬 때 참조 할 수 있는 객체입니다. 액션 객체는 필수적으로 type 라는 값을 가지고 있어야 합니다.

예를들어 { type: 'INCREMENT' } 이런 객체를 전달 받게 된다면, 리덕스 스토어는 아~ 상태에 값을 더해야 하는구나~ 하고 액션을 참조하게 됩니다.

추가적으로, 상태값에 2를 더해야 한다면, 이러한 액션 객체를 만들게 됩니다: { type: 'INCREMENT', diff: 2 }

그러면, 나중에 이 diff 값을 참고해서 기존 값에 2를 더하게되겠죠. type 를 제외한 값은 선택적(optional) 인 값입니다

리듀서를 통하여 상태를 변화시키기

액션 객체를 받으면 전달받은 액션의 타입에 따라 어떻게 상태를 업데이트 해야 할지 정의를 해줘야합니다.

이러한 업데이트 로직을 정의하는 함수를 리듀서라고 한다.

예를들어 type 이 INCREMENT 라는 액션이 들어오면 숫자를 더해주고, DECREMENT 라는 액션이 들어오면 숫자를 감소시키는 작업

리듀서 함수는 두가지의 파라미터를 받습니다.

state: 현재 상태
action: 액션 객체

그리고, 이 두가지 파라미터를 참조하여, 새로운 상태 객체를 만들어서 이를 반환합니다.

상태가 변화가 생기면, 구독하고 있던 컴포넌트에게 알림

상태에 변화가 생기면, 이전에 컴포넌트가 스토어한테 구독 할 때 전달해줬었던 함수 listener 가 호출됩니다.

이를 통하여 컴포넌트는 새로운 상태를 받게되고, 이에 따라 컴포넌트는 리렌더링하는 구조가 된다.

개념 미리 정리하기

액션

상태에 어떠한 변화가 필요하면 액션(action)이라는 것이 발생합니다. 이는 하나의 객체로 표현되는데, 액션 객체는 다음과 같은 형식으로 이루어져 있다.

{
       type: 'TOGGLE_VALUE'
}

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

예시 액션)

{
    type: 'ADD_TODO',
    data: {
            id: 1,
            text: '리덕스 배우기',
          }
}
{
    type: 'CHANGE_INPUT',
    text: '안녕하세요'
}

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

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

//화살표 함수로 만든다면
const changeInput = text => ({
    type: 'CHANGE_INPUT',
    text
})

어떠 변화를 일으켜야 할때마다 액션 객체를 만들어야 하는데 매번 액션 객체를 직접 작성하기 번거로울 수 있고, 만드는 과정에서 실수로 정보를 놓칠 수 있기 때문에 이러한 일을 방지하기 위해 함수로 만들어서 관리합니다.

리듀서

리듀서는 변화를 일으키는 함수입니다. 액션을 만들어서 발생시키면 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아 옵니다. 그리고 두 값을 참고하여 새로운 상태를 만들어 반환해 줍니다.

const initialState = {
    counter: 1
};

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

스토어

프로젝트에 리덕스를 적용하기 위해 스토어를 만듭니다. 한개의 프로젝트는 단 하나의 스토어만 가질 수 있습니다.

스토어 안에는 현재 애플리케이션 상태와 리듀서가 들어가 있으며, 그외에도 몇가지 내장함수를 가지고 있습니다.

디스패치

디스패치는 스토어의 내장 함수 중 하나입니다. 디스패치는 '액션을 발생시키는 것'이라고 이해하면 됩니다. 이 함수는 dispatch(action)과 같은 형태로 액션 객체를 파라미터로 넣어서 호출합니다.

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

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

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

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

리액트 없이 쓰는 리덕스

리덕스는 리액트에 종속되는 라이브러리가 아니라 다른 라이브러리/프레임워크와 함께 사용할 수 있다(ex.angular,ember,vue등)

리덕스는 바닐라 자바스크립트와 함께 사용할 수도 있습니다.(바닐라 자바스크립트는 라이브러리나 프레임워크 없이 사용하는 순수 자바스크립트)

여기서는 바닐라 자바스크립트 환경에서 리덕스를 사용하는 방법에 대해 설명함

Parcel로 프로젝트 만들기

parcel은 쉽고 빠르게 웹 애플리케이션 프로젝트를 구성할 수 있다.

yarn gloabal add parcel-bundler

mkdir vanilla-redux
cd vanilla-redux
# pagekage.json 파일을 생성
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 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>
   </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을 직접 수정해 주어야 한다. 다음과 같이 자바스크립트 파일 상단에 수정할 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';

다음으로 이 액션을 사용하여 액션 객체를 만드는 액션 생성 함수를 작성해 줍니다. 액션 객체는 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 });

초기값 설정

이 프로젝트에서 사용할 초기값을 정의해 준다. 초기값의 형태는 자유롭게 숫자일수도, 문자열일수도, 객체일 수도 있다.

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와 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 값이 undefinded다. 해당 값이 undefined로 주어졌을 떄는 initialState를 기본값으로 설정하기 위해 함수의 파라미터 쪽에 기본값이 설정되어 있다. (default)

리듀서에서는 상태의 불변성을 유지하면서 데이터의 변화를 일으켜 주어야 합니다. 이 작업을 할 때 spread 연산자(...)를 사용하면 편리하다.

스토어 만들기

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

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

여기서는 subscribe 함수를 직접 사용하지만, 리액트 프로젝트에서 리덕스를 사용할 때는 이 함수를 직접 사용하지 않는다. (컴포넌트에서 리덕스 상태를 조회하는 과정에서 react-redux라는 라이브러리가 이 작업을 대신해 주기 때문)

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

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();
store.subscribe(render);

액션 구독하기

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

index.js

....

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

결과 index.js

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

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

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

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

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

리덕스의 세 가지 규칙

리덕스를 프로젝트에서 사용할 때 지켜야 하는 세 가지 규칙이 있다

단일 스토어
1. 하나의 애플리케이션 안에서는 하나의 스토어만 존재한다.
2. 여러개의 스토어를 사용하는 것이 불가능한 것은 아니지만 상태 관리가 복잡해 질 수 있으므로 권장하지 않는다
읽기 전용 상태
1. 리덕스 상태는 읽기 전용
2. 리덕스 상태를 업데이트를 할 때 기존의 객체를 건드리지 않고 새로운 객체를 생성해주어야 한다. => spread(...)를 통해 불변성 유지 (내부적으로 데이터가 변경되는 것을 감지하기 위해 얕은 비교 검사를 하기 때문, 객체의 변화를 감지할 때 객체의 깊숙한 안쪽까지 비교하는 것이 아니라 겉부터 비교해서 좋은 성능 유지)
리듀서는 순수한 함수
1. 변화를 일으키는 리듀서는 순수한 함수여야 한다.
2. 순수한 함수 조건
  1. 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받는다
  2. 파라미터 이외 값에는 의존하면 안된다.
  3. 이전 상태는 절대로 건드리지 않고, 변화를 준 새로운 상태 객체를 만들어 반환한다.
  4. 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과 값을 반환해야 한다.

저작자표시

'javascript > React' 카테고리의 다른 글

immer를 사용하여 더 쉽게 불변성 유지하기 (0)	2023.01.24
[React] 리액트 기초 예시 -2 (0)	2022.07.30
[React] 리액트 기초 예시 - 1 (2)	2022.07.29

리덕스란?

리덕스 왜 쓸까?

리덕스를 쓰면, 상태 관리를 컴포넌트 바깥에서 한다!

스토어 설정

컴포넌트의 스토어 구독

스토어에 상태 변경하라고 알려주기

리듀서를 통하여 상태를 변화시키기

상태가 변화가 생기면, 구독하고 있던 컴포넌트에게 알림

개념 미리 정리하기

액션

리듀서

스토어

디스패치

구독

리액트 없이 쓰는 리덕스

Parcel로 프로젝트 만들기

간단한 UI 구성하기

DOM 레퍼런스 만들기

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

초기값 설정

리듀서 함수 정의

스토어 만들기

render 함수 만들기

구독하기

액션 구독하기

리덕스의 세 가지 규칙

'javascript > React' 카테고리의 다른 글

검색 태그

티스토리툴바