16.1 개념 미리 정의하기
리덕스(redux)
- 리액트 상태 관리 라이브러리
- 리액트에 종속되는 라이브러리는 아님
- 리덕스 사용시 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있음
- 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트 가능
- 전역 상태를 관리할 때 효과적
16.1.1 액션
- 상태에 어떠한 변화가 필요하면 액션(action)이 발생
- 액션은 하나의 객체로 표현
- 액션 객체는 type 필드를 반드시 가지고 있어야 함
{
type:'ADD_TODO',
data: {
id:1,
text: "리덕스 배우기"
}
}
{
type:'CHANGE_INPUT',
text: '안녕하세요'
}
16.1.2 액션 생성 함수
- 액션 생성 함수 (action creater)는 액션 객체를 만들어 주는 함수
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 = initalState, action) {
switch(action.type) {
case INCREMENT:
return {
counter: state.counter +1;
};
default:
return state;
}
}
16.1.4 스토어
- 프로젝트에 리덕스를 적용하기 위해 스토어(store)를 만듬
- 한 개의 프로젝트는 단 하나의 스토어만 가질 수 있음
- 스토어 안에는 현재 애플리케이션 상태와 리듀서가 들어가 있음
- 내장 함수 : 디스패치, 구독,..
16.1.5 디스패치
- 스토어의 내장 함수 중 하나
- 액션을 발생시키는 것
- dispatch(action)과 같은 형태로 액션 객체를 파라미터로 넣어서 호출
- 이 함수가 호출되면 스토어는 리듀서 함수를 실행시켜서 새로운 상태를 만들어 줌
16.1.6 구독
- 스토어의 내장 함수 중 하나
- subscribe 함수 안에 리스너 함수를 파라미터로 넣어서 호출해 주면, 이 리스너 함수가 액션이 디스패치되어 상태가 업데이트될 때마다 호출됨
const listener = () => {
console.log('상태가 업데이트됨');
}
const unsubscribe = store.subscribe(listener);
unsubscribe(); //추후 구독을 비활성화할 때 함수를 호출
16.2 리액트 없이 쓰는 리덕스
- 리액트는 바닐라 자바스크립트와 함께 사용할 수도 있음
16.2.1 Parcel로 프로젝트 만들기
- 프로젝트를 구성하기 위해 Parcel 사용
npm install -g parcel-bundler
- 프로젝트 디렉터리를 생성한 후 package.json 파일 생성
- npm init -y => 'default 값으로 설정된 package.json을 만들겠다'
mkdir vanilla-redux
cd vanilla-redux
#package.json 파일을 생성
npm init -y
index.html
<html>
<body>
<div>바닐라 자바스크립트</div>
<script src="./index.js"></script>
</body>
</html>
index.js
console.log('hello parcel');
- parcel index.html 을 실행하면 개발용 서버가 실행됨
- 리덕스 모듈 설치
npm install redux
16.2.2 간단한 UI 구성하기
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>
16.2.3 DOM 레퍼런스 만들기
- UI를 관리할 때 별도의 라이브러리를 사용하지 않기 떄문에 DOM을 직접 수정해 주어야 함
index.js
const divToggle = document.querySelector('.toogle');
const counter = document.querySelector('h1');
const btnIncreae = document.querySelector('#increase');
const btnDecrease = document.querySelector('#decrease');
16.2.4 액션 타입과 액션 생성 함수 정의
- 프로젝트의 상태에 변화를 일으키는 것을 액션이라고 함
- 액션 이름은 문자열 형태로, 주로 대문자로 작성하며 액션 이름은 고유해야 함
- 액션 이름을 사용하여 액션 객체를 만드는 액션 생성 함수 작성
index.js
- 리듀서 함수가 맨 처음 호출될 때는 state 값이 undefined
- 해당 값이 undefined로 주어졌을 때는 initalState를 기본값으로 설정
- 리듀서에서는 상태의 불변성을 유지하면서 데이터에 변화를 일으켜 주어야 함
const divToggle = document.querySelector('.toggle');
const counter = document.querySelector('h1');
const btnIncreae = 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 초깃값 설정
index.js
...
//초깃값 설정
const initialState = {
toggle: false,
counter: 0
};
16.2.6 리듀서 함수 정의
- 리듀서는 변화를 일으키는 함수
- 함수의 파라미터로는 state와 action 값을 받아옴
index.js
- 리듀서 함수가 맨 처음 호출될 때는 state 값이 undefiend
- 해당 값이 undefined로 주어졌을 때 initialState를 기본값으로 설정하기 위해 함수의 파라미터 쪽에 기본값이 설정
- 리듀서에서는 상태의 불변성을 유지하면서 데이터에 변화를 일으켜 줘야 함
-> spread 연산자(...)를 사용
...
//state가 undefined일 때는 initalState를 기본값으로 사용
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;
}
}
16.2.7 스토어 만들기
- 스토어를 만들 떄는 createStore 함수 사용
- 코드 상단에 import 구문을 넣어 리덕스에서 해당 함수를 불러오고, 함수의 파라미터에는 리듀서 함수를 넣어 주어야 함
index.js
import { createStore } from 'redux';
(...)
const store = createStore(reducer);
16.2.8 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();
16.2.9 구독하기
- 스토어의 상태가 바뀔때 마다 render 함수가 호출되도록 해줌
- 스토어의 내장 함수 subscribe를 사용하여 수행
- subscribe 함수의 파라미터로는 함수 형태의 값을 전달해 줌
-> 전달된 함수는 추후 액션이 발생하여 상태가 업데이트될 때마다 호출
ex)
const listener = () => {
console.log('상태가 업데이트됨');
}
const unsubscribe = store.subscribe(listener);
unsubscribe(); //추후 구독을 비활성화할 때 함수를 호출
- 상태가 업데이트될 때마다 render 함수를 호출
index.js
...
render();
store.subscribe(render);
16.2.10 액션 발생시키기
- 액션을 발생시키는 것을 디스패치라고 함
- 스토어의 내장 함수 dispatch를 사용
- 파라미터는 액션 객체를 넣어 주면됨
index.js
- 각 DOM 요소에 클릭 이벤트 설정
- 이벤트 함수 내부에서는 dispatch 함수를 사용하여 액션을 스토어에게 전달 해줌
...
//액션 발생시키기
divToggle.onclick = () => {
store.dispatch(toggleSwitch());
};
btnIncreae.onclick = () => {
store.dispatch(increase(1));
};
btnDecrease.onclick = () => {
store.dispatch(decrease());
};
16.3 리덕스의 세 가지 규칙
1) 단일 스토어
- 하나의 애플리케이션 안에는 하나의 스토어가 들어 있음
2) 읽기 전용 상태
- 상태를 업데이트할 때 기존의 객체는 건드리지 않고 새로운 객체를 생성해 주어야 함
- 리덕스에서 불변성을 유지해야 하는 이유는 내부적으로 데이터가 변경되는 것을 감지하기 위해 얕은 비교(shallow equality) 검사를 하기 때문
3) 리듀서는 순수한 함수
- 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받음
- 파라미터 외의 값에는 의존하면 안 됨
- 이전 상태는 절대로 건드리지 않고, 변화를 준 상태 객체를 만들어서 반환
- 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과 값을 반환해야 함
'react' 카테고리의 다른 글
| [리액트를 다루는 기술] 18장 리덕스 미들웨어를 통한 비동기 작업 관리(1) (1) | 2023.12.09 |
|---|---|
| [리액트를 다루는 기술] 17장 리덕스를 사용하여 리액트 애플리케이션 상태 관리하기 (0) | 2023.11.24 |
| [리액트를 다루는 기술] 15장 Context API (2) | 2023.11.22 |
| [리액트를 다루는 기술] 14장 외부 API를 연동하여 뉴스 뷰어 만들기 (1) | 2023.11.17 |
| [리액트를 다루는 기술] 13장 리액트 라우터로 SPA 개발하기 (1) | 2023.11.17 |
