리액트를 다루는 기술 ( 리덕스 라이브러리 이해하기 )
리덕스 : 가장 많이 사용하는 리액트 상태 관리 라이브러리
- 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리
- 컴포넌트끼리 똑같은 상태를 공유해야 할 때 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트 가능
- 전역 상태를 관리할 때 굉장히 효과적
- 상태를 더욱 체계적으로 관리가 가능(프로젝트 규모가 클 경우 더욱 좋다.)
- 코드의 유지 보수성, 작업 효율의 극대화
- 편리한 개발자 도구 지원, 미들웨어 기능 제공하여 비동기 작업에 효율적으로 관리
실습 흐름
- 핵심 키워드
- Parcel로 프로젝트 구성
- 토글 스위치와 카운터 구현
16-1. 개념 정리
16-1-1. 액션
액션(actions) : 상태에 어떠한 변화가 필요하면 발생. 하나의 객체로 표현
- 형식
{
type: 'TOGGLE_VALUE'
}- 반드시 type 필드를 가지고 있어야 함. 액션의 이름이라고 생각하면 됨.
- 그 외의 값들은 나중에 상태 업데이트를 할 때 참고해야 할 값
- 예시
{
type: 'ADD_TODO',
data: {
id: 1,
text: '리덕스 배우기'
}
}
{
type: 'CHANGE_INPUT',
text: '안녕하세요'
}16-1-2. 액션 생성 함수
액션 생성 함수(action creator) : 액션 객체를 만들어 주는 함수
function addTodo(data) {
return {
type: 'ADD_TODO',
data
}
}
// 화살표 함수
const changeInput = (text) => {
type: 'CHANGE_INPUT',
text
}어떤 변화를 일으켜야 할 때마다 액션 객체를 만들어야 하는데 매번 액션 객체를 직접 작성하기 번거로울 수 있고, 만드는 과정에서 실수로 정보를 놓칠 수 있다. 이러한 일을 방지하기 위해 이를 함수로 만들어서 관리한다.
16-1-3. 리듀서
리듀서(reducer) : 변화를 일으키는 함수
- 액션을 만들어서 발생시키면 현재 상태와 전달받은 액션 객체를 파라미터로 받아옴
- 두 값을 참고하여 새로운 상태를 만들어서 반환
형태
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. 스토어
스토어(store) : 프로젝트에 리덕스를 적용하기 위해 만듬
- 한 개의 프로젝트는 단 하나의 스토어만 가질 수 있음
- 스토어 안에는 현재 애플리케이션의 상태 , 리듀서가 들어있고, 그 외에도 몇 가지 중요한 내장 함수를 지님
16-1-5. 디스패치
디스패치(dispatch) : 스토어의 내장 함수
- '액션을 발생시키는 것'이라고 이해하면 됨
- dispatch(action) 과 같은 형태로 액션 객체를 파라미터로 넣어 호출
- 호출되면 스토언느 리듀서 함수를 실행시켜서 새로운 상태를 만들어 줌
16-1-6. 구독
구독(subscribe) : 스토어의 내장 함수
- subscribe 함수 안에 리스너 함수를 파라미터로 넣어서 호출하면, 이 리스너 함수가 액션이 디스패치되어 상태가 업데이트될 때마다 호출
예시
const listener = () => {
console.log('상태가 업데이트 됨')
}
const unsubscribe = store.subscribe(listener)
unsubscribe() // 추후 구독을 비활성화할 때 함수를 호출16-2. 리액트 없이 쓰는 리덕스
리덕스는 리액트에 종속되는 라이브러리가 아님. 리액트에서 사용하려고 만들어졌지만 실재로 다른 UI 라이브러리 / 프레임워크와 함꼐 사용할 수 있다. 리덕스는 바닐라 자바스크립트와 함께 사용할 수 있는데, 바닐라 자바스크립트는 라이브러리나 프레임워크 없이 사용하는 순수 자바스크립트 그 자체를 의미한다.
리덕스의 핵심 기능과 작동 원리를 이해해 보기 위해 바닐라 자바스크립트 환경에서 리덕스를 사용한다.
16-2-1. Parcel로 프로젝트 만들기
프로젝트를 구성하기 위해 Parcel이라는 도구를 사용할 것인데, 이 도구를 사용하면 쉽고 빠르게 웹 애플리케이션 프로젝트를 구성할 수 있다고 한다.
yarn global add parcel-bundler
yarn global이 설치되지 않는다면 npm install -g parcel-bundler를 하면 된다고 한다.package.json 파일을 생성
mkdir vanilla-redux
cd vanilla-redux
yarn init -y해당 폴더에서 index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>바닐라 자바스크립트</title>
</head>
<body>
<div>바닐라 자바스크립트</div>
<script src="./index.js"></script>
</body>
</html>index.js
console.log("hello parcel");작성한 뒤 터미널에
parcel index.html명령어를 실행하면 개발용 서버가 실행
주소가 나온다. 해당 주소로 들어가면
이제 리덕스 모듈을 설치한다.
yarn add redux16-2-2. 간단한 UI 구성
index.css
.toggle {
border: 2px solid #333;
width: 64px;
height: 64px;
border-radius: 32px;
box-sizing: border-box;
}
.toggle.active {
background: yellow;
}index.html 수정
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>바닐라 자바스크립트</title>
<link rel="stylesheet" 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 레퍼런스 만들기
파일 상단에 수정할 DOM 노드를 가리키는 값을 미리 선언
const divToggle = document.querySelector(".toggle");
const counter = document.querySelector("h1");
const btnIncrease = document.querySelector("#increase");
const btnDecrease = document.querySelector("#decrease");16-2-4. 액션 타입과 앤션 생성 함수 정의
액션 : 프로젝트의 상태에 변화를 일으키는 것
먼저 액션의 이름을 정의한다. 액션의 이름은 문자열 형태로, 주로 대문자로 작성하고 액션의 이름은 고유해야 한다. 중복되면 의도하지 않은 결과가 발생할 수 있기 때문
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 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 = (defference = { type: INCREASE, defference });
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 = (defference = { type: INCREASE, defference });
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 = (defference) => ({
type: INCREASE,
defference,
});
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.defference,
};
case DECREASE:
return {
...state,
counter: state.counter - 1,
};
default:
return false;
}
}리듀서 함수가 맨 처음 호출될 때는 state 값이 undefined이다. 해당 값이 undefined로 주어졌을 때는 initialState를 기본값으로 설정하기 위해 함수의 파라미터 쪽에 기본값이 설정되어 있다.
리듀서에서는 상태의 불변성을 유지하면서 데이터에 변화를 일으켜 줘야하는데 이 작업을 할 때는 spread 연산자를 사용하면 편하다. 단 객체 구조가 복잡해지면 ( 예로 object.something.inside.value ) spread 연산자로 불변성을 관리하며 업데이트하기에는 번거롭고 코드 가독성도 나쁘다. 그러므로 리덕스의 상태는 최대한 깊지 않은 구조로 진행하는 것이 좋다.
만약 객체 구조가 복잡하거나 배열도 함께 다루면 immer 라이브러리를 사용하는 것이 리듀서를 쉽게 작성할 수 있다고 한다.
16-2-7. 스토어 만들기
스토어를 만들 때는 createStore 함수를 사용. 이 함수를 사용하려면 코드 상단에 import 구문을 넣어 리덕스에서 해당 함수를 불러와야 하고, 함수의 파라미터에는 리듀서 함수를 넣어 주어야한다.
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 = (defference) => ({
type: INCREASE,
defference,
});
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.defference,
};
case DECREASE:
return {
...state,
counter: state.counter - 1,
};
default:
return false;
}
}
const store = createStore(reducer);16-2-8. render 함수 만들기
render 함수 : 상태가 업데이트될 때마다 호출. 리액트의 render 함수와는 다르게 이미 html을 사용하여 만들어진 UI 의 속성을 상태에 따라 변경
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 함수의 파라미터로는 함수 형태의 값을 전달해 준다. 이렇게 전달된 함수는 추후 액션이 발생하여 상태가 업데이트될 때마다 호출한다. 지금 프로젝트에서는 subscribe 함수를 직접 사용하지만, 리액트 프로젝트에서 리덕스를 사용할 떄는 이 함수를 직접 사용하지는 않는다. 컴포넌트에서 리덕스 상태를 조회하는 과정에서 react-redux라는 라이브러리가 이 작업을 대신해 주기 때문이다.
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를 사용한다. 파라미터는 액션 객체를 넣어 주면 된다.
DOM 요소에 클릭 이벤틀르 설정한다. 이벤트 함수 내부에서는 dispatch 함수를 사용하여 액션을 스토에 전달해 준다.
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. 읽기 전용 상태
리덕스 상태는 읽기 전용이다. 상태를 업데이트할 때 기존의 객체는 건드리지 않고 새로운 객체를 생성해 주어야 한다.
리덕스에서 불변성을 유지해야 하는 이유는 내부적으로 데이터가 변경되는 것을 감지하기 위해 얕은 비교(shallow equality) 검사를 하기 때문이다. 객체의 변화를 감지할 때 객체의 깊숙한 안쪽까지 비교하는 것이 아니라 겉핥기 식으로 비교하여 좋은 성능을 유지할 수 있는 것이다.
16-3-3. 리듀서는 순수한 함수
변화를 일으키는 리듀서 함수는 순수한 함수여야 한다. 다음 조건을 만족해야한다.
- 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받는다.
- 파라미터 외의 값에는 의존하면 안 된다.
- 이전 상태는 절대로 건드리지 않고, 변화를 준 새로운 상태 객체를 만들어서 반환한다.
- 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과 값을 반환해야 한다.
위 네 가지 사향을 주의해야 한다.
Author And Source
이 문제에 관하여(리액트를 다루는 기술 ( 리덕스 라이브러리 이해하기 )), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dohy9443/리액트를-다루는-기술-리덕스-라이브러리-이해하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
