Redux는 React를 공부하다보면 언젠가는 접하게 되는 친구다.
그렇지만, Vanilla javascript로 먼저 접하는 것이 훨씬 공부하는 입장에서 도움이 될 수있다는 니꼬의 말을 듣고 하나씩 차례로 공부해보려고 한다.
생각보다 기본 개념은 까다롭지 않아서 이 글을 읽는다면, 모두 쉽게 Redux를 이해할 수 있을 것이다.
일단 Redux를 왜 써야하는 지에 대해 이해해보자.
(26) React 입문자들이 알아야할 Redux 쉽게설명 (8분컷) - YouTube
이 사람 강의를 보면 이해가 쉽다.
그럼 됐고 바로 실습해보자.
(니콜라스 강의보고 따라함)
redux에서 사용되는 용어는 스토어, 액션, 디스패치, 리듀서가 있다.
우선 리액트는 어떻게 실행될까?
환경부터 만들자.
npx create-react-app vanilla-redux
해당 명령어를 실행하면 리액트 환경이 구축된다.
구출된 폴더 안으로 들어가면 App.js가 보이는데 이 파일이 화면을 구성한다.
리액트를 구성하지 않고 node.js를 실행하면 어떤 파일이 열릴까?
실행해보자.
npm start
해당 명령어를 실행하면 파일의 가장 상위에 있는 index.html이 실행된다.
그런데 파일 가장 index.html를 없다면?
그냥 그 다음에 있는 index.html를 찾아가서 띄워준다.
무튼 Vanilla javascript로 만들기 위해서는 아래와 같은 파일 구조를 우선 만들어줘야한다.
index.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Vanilla Redux</title>
</head>
<body>
<button id="add">Add</button>
<span>0</span>
<button id="minus">Minus</button>
</body>
</html>
index.js
const plus = document.getElementById('add');
const minus = document.getElementById('minus');
const number = document.querySelector('span');
var count = 0;
const handleText = () => {
number.innerText = count;
};
const handleAdd = () => {
count++;
handleText();
};
const handleMinus = () => {
count--;
handleText();
};
plus.addEventListener('click', handleAdd);
minus.addEventListener('click', handleMinus);
이렇게 코드를 작성하고 서버를 실행하면 버튼을 통해 버튼 중간의 숫자를 증감시킬 수 있는 화면이 만들어진다.
이 동작을 다른 페이지에서도 활용하고 싶다!
즉, 해당 데이터를 전역으로 사용하도록 하여 다른 페이지에서도 해당 숫자를 끌어오고 싶다면 이 코드를 더 수정해야한다. 물론 할수도 있겠지만 코드가 매우 복잡해질 것이다.(무한 props..)
이러한 문제점을 보완하고자 우리는 드디어 Redux를 적용해볼 것이다.
우선 터미널에 redux를 추가하자
npm install redux
그리고 Redux를 추가한 코드는 다음과 같다.
import { createStore } from 'redux';
const countModifier = (state = 0) => {
return state;
};
const countStore = createStore(countModifier);
console.log(countStore.getState());
Redux는 크게 store, reducer, action으로 이뤄져있다.
- Store : 변수를 담아두는 공간
- Reducer : 변수를 조작을 책임진다, 일치하는 reducer가 아니거나 다른 요소들은 store에 담겨있는 변수를 조작하지 못한다.
- Action : 실질적으로 변수를 조작하게 하는 것
따라서 위 코드에 의하면 countStore이라는 변수를 createStore을 통해 만들고 이때에 countModifier이라는 reducer를 통해해 오로지 countModifier만을 이용해서 countStore이라는 변수데이터를 변형할 수 있게 된다.
countModifier이라는 함수를 살펴보면, 그 인자로 state가 있다.
이는 store 변수 데이터의 값, 즉 초기값을 정의할 수 있다. 지금은 0으로 초기화하였으므로 실행 시 콘솔창에 숫자 0이찍히는 것을 확인할 수 있다.
그럼 reducer는 내부적으로 어떻게 store에 저장된 데이터를 관리할까?
이때 action이 사용된다.
다음의 코드를 보자
import { createStore } from 'redux';
const plus = document.getElementById('add');
const minus = document.getElementById('minus');
const number = document.querySelector('span');
const countModifier = (count = 0, action) => {
if (action.type == 'ADD') {
count++;
} else if (action.type == 'MINUS') {
count--;
}
return count;
};
const countStore = createStore(countModifier);
countStore.dispatch({ type: 'ADD' });
countStore.dispatch({ type: 'ADD' });
countStore.dispatch({ type: 'ADD' });
countStore.dispatch({ type: 'ADD' });
countStore.dispatch({ type: 'ADD' });
console.log(countStore.getState());
dispatch를 통해 action을 보낼 수 있다.
이때 object형으로 보내야하기 때문에 중괄호로 묶어 보낸것.
이렇게 action을 보내면, 0으로 초기화되어있던 count가 1로 증가한다.
해당 코드에서는 총 5번 action을 보냈으므로 최종적인 countStore에는 5가 출력된다.
정말 신기하군..
왜 다시 0으로 돌아가지 않고 값이 저장될까?
신기하다
이제 버튼에 해당 기능을 적용해보자.
우선 또 알아야 할 것이 있다.
"Subscribe"
한국어로 구독한다는 말이다.
여기에서 store은 어떠한 함수를 "구독"할 수가 있는데, 이렇게 특정 함수를 구독하는 경우 값이 변경될 때마다 이 구독한 함수가 이어서 실행된다.
구현은 아래와 같다.
import { createStore } from 'redux';
const plus = document.getElementById('add');
const minus = document.getElementById('minus');
const number = document.querySelector('span');
const countModifier = (count = 0, action) => {
if (action.type == 'ADD') {
count++;
} else if (action.type == 'MINUS') {
count--;
}
return count;
};
const countStore = createStore(countModifier);
const handleText = () => {
number.innerText = countStore.getState();
};
const handleADD = () => {
countStore.dispatch({ type: 'ADD' });
};
const handleMinus = () => {
countStore.dispatch({ type: 'MINUS' });
};
countStore.subscribe(handleText); // 구독!
plus.addEventListener('click', handleADD);
minus.addEventListener('click', handleMinus);
console.log(countStore.getState());
각 버튼을 클릭할 때, 숫자가 더하거나 빼진다.
그리고 subscribe로 handleText함수를 구독하여, 값에 변화가 생길 때를 캐치하여 화면에서 변경된 숫자를 확인할 수 있게 된다.
이렇게 Vanilla JS로 Redux에 대해 알아보았다!
다음 글에서는 본격 React에 이 Redux를 어떻게 적용하는 지에 대해 알아보자.
'React당' 카테고리의 다른 글
| 무한 스크롤과 Intersection Observer API의 특징에 대해 알아봅시다. (1) | 2024.11.18 |
|---|---|
| React Router의 동적 라우팅(Dynamic Routing)이란 뭘까? (0) | 2024.11.04 |
| [React] Context API를 위한 useContext hook (2) | 2024.10.07 |
| React - 스파게티코드 지양을 위한 Component 구성 방법 (0) | 2024.02.17 |
