Redux란?
리덕스는 리액트에서 state관리를 쉽게 하기 위해서 사용하는 라이브러리이다. 리액트에서 뿐만 아니라 일반 자바스크립트에서도 사용할 수 있다.
공식사이트 에서는 Redux를 아래와 같이 정의하고 있다.
Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다.
상태를 담아 두는 컨테이너란다. 뭔가를 담아두는 것 같다. 한 번 알아보자.!
Redux 왜씀...?
ts코드를 보면서 redux를 왜 쓰는지 확인해보자!
저번 타입스크립트 포스팅을 하면서 ts를 사용해보고싶었고 과감하게 사용해봣다.힘들었다.
자 여러가지 필요한 세팅이 조금 있다.!
-
리액트 프로젝트 생성
npx create-react-app 프로젝트 명 --typescript -
타입스크립트 필요 라이브러리 설치
$npm i --save react react-dom typescript
$npm i --save-dev @types/react @types/react-dom @types/node -
tsconfig.js 설정 default상태에서
baseUrl만 추가로 설정해주었는데
{
"compilerOptions": {
"target": "es6",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"baseUrl": "./src",
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": [
"src"
],
}이제 만들어진 ReactApp에서 여러가지를 지워줄거다.
1. 사용하지 않는 src내의 파일 삭제하자!
index.ts와 react-app-env.d.ts파일 제외하고 전부 삭제했다.
2. index.ts안의 스크립트 내용 전부 삭제 해주었다.
html
<!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>Redux를 왜 사용하는지 알기 위해서 ts코드를 보자!
Ts
const add = document.getElementById("add");
const minus = document.getElementById("minus");
const number = document.querySelector("span");
let count = 0;
const updateText = () => {
if (number instanceof HTMLSpanElement) {
number.innerHTML = `${count}`;
}
};
const handleAdd = () => {
count += 1;
updateText();
};
const handleMinus = () => {
count -= 1;
updateText();
};
if (add instanceof HTMLButtonElement) {
add.addEventListener("click", handleAdd);
}
if (minus instanceof HTMLButtonElement) {
minus.addEventListener("click", handleMinus);
}add버튼을 클릭하면 1씩 증가하고 minus버튼을 클릭하면 1씩 차감된다. 자 근데 handleAdd함수와 handleMinus 함수 안에 동일한 함수가 두번이 사용됫다. updateText라는 이렇게 우리는 변경된 상태를 매번 매번 알려줘야한다.! 근데 이게 하나둘씩 열개씩 쌓이면.. 우린 얼마나 괴로울까 🥲 이래서 Redux를 사용하는 것이다.!
결론
사실 이정도는 React hook의 useState라는 함수를 써도 편하게 조절 할 수 있다. 그래서 우리는 항상 뭘 사용 할지 과연 좋은 것인지 항상 고민 해봐야 할 것이다.
참조
