-
[Redux] 리덕스(Redux) 배우기JavaScript/Redux 2023. 3. 10. 14:33728x90반응형
리덕스(Redux)란?
리덕스(Redux)는 JavaScript 애플리케이션에서 상태(state)를 관리하기 위한 도구입니다. 리덕스는 React와 함께 많이 사용되며, React의 상태 관리를 위한 라이브러리 중 하나입니다.
리덕스의 특징
- 애플리케이션의 상태를 단일 스토어(store)에 저장
- store에서 상태를 변경하거나 조회할 수 있는 메서드를 제공
- 이를 통해 상태를 예측 가능하게 만듦
- 애플리케이션의 복잡도를 낮춤
- 디버깅과 테스팅을 용이하게 함
리덕스의 핵심 원칙은 상태(state)는 읽기 전용이며, 상태를 변경하는 것은 순수 함수(reducers)로만 가능하다는 겁니다. 이를 통해 상태 변경을 추적하고, 애플리케이션에서 일어나는 상태 변화를 예측할 수 있게 됩니다.
리덕스(Redux) 사용하기
리덕스 toolkit 설치하기
# NPM $ npm install @reduxjs/toolkit # Yarn $ yarn add @reduxjs/toolkitreact+타입스크립트 환경에서 리덕스 설치하기
$ npm i --dev @types/react-redux
리덕스 사용해보기
📁 index.html
<body> <button id="minus">-</button> <span></span> <button id="add">+</button> </body>플러스 버튼과 마이너스 버튼이 있는 간단한 예제 프로그램입니다.
각각의 버튼을 누르면 숫자가 커지거나 작아집니다.
순수 바닐라 js로 리덕스를 배워봅니당
📁 index.js
import { createStore } from "redux";redux로부터 createStore를 받아옵니다.
createStore 사용법
: createStore(reducer)
store는 변화하는 상태(state)를 저장하는 곳입니다.
reducer라는 함수를 인자로 넣어서 state를 관리합니다.
reducer
이전 state를 받아와서 새 state를 리턴하는 상태 관리 함수
const countStore = createStore(countModifier);countStore라는 스토어를 생성하고 리듀서로서 countModifier라는 함수를 넣어줍니다.
위와 마찬가지로 reducer는 원하는 함수명(예: countModifier)으로 변경해서 사용하면 됩니다.
reducer 사용법
const reducer = (state = default, action) { // ••• }reducer은 인자로 두 가지를 받습니다.
- state : (변화하는) data 상태
- action : data의 state를 변화시키는 오브젝트
state
변화하는 데이터를 받아오고 디폴트 값을 아래처럼 정해줍니다.
action
state를 업데이트하기 위해 state로 보내지는 오브젝트 형식의 데이터입니다.
// countModifier : reducer // state의 default값 : 0 const countModifier = (count = 0, action) => { switch (action.type) { case "ADD": return count + 1; case "MINUS": return count - 1; default: return count; } };action의 type이 ADD이면 count + 1을 반환하고, MINUS이면 count - 1을 반환합니다.
여기서 말하는 action의 type은 아래와 같습니다.
const handleAdd = () => { countStore.dispatch({ type: ADD }); }; const handleMinus = () => { countStore.dispatch({ type: MINUS }); };action의 type을 ADD 혹은 MINUS로 dispatch를 해주는 함수 두 개를 만듭니다.
dispatch({})
dispatch는 store의 내장함수로서 action 오브젝트의 값을 바꿔주는 함수입니다.
subscribe()
store.subscribe('함수');subscribe는 store의 내장함수로서 말의 의미 그대로 store를 구독(subscription)하는 함수입니다.
store에 변화가 있을 때마다 '함수'가 호출됩니다.
getState()
store의 내장함수로 store의 현재 state를 받아옵니다.
const onChange = () => { number.innerText = countStore.getState(); // getState() : state를 받아온다. }; countStore.subscribe(onChange);countStore에 데이터가 변화할 때마다 onChange 함수가 호출됩니다.
index.js 전체 코드
import { createStore } from "redux"; const add = document.getElementById("add"); const minus = document.getElementById("minus"); const number = document.querySelector("span"); number.innerText = 0; // 실수 방지용 상수 선언 ㅎㅅㅎ const ADD = "ADD"; const MINUS = "MINUS"; // reducer // 디폴트값 0으로 설정 const countModifier = (count = 0, action) => { switch (action.type) { case ADD: return count + 1; case MINUS: return count - 1; default: return count; } }; // store 생성 (reducer : countModifier) const countStore = createStore(countModifier); // store를 subscribe할 onChange 함수 const onChange = () => { number.innerText = countStore.getState(); }; // store의 action이 dispatch될 때마다 '함수'가 호출됨 countStore.subscribe(onChange); // add 버튼이 클릭되면 action.type을 add로 설정 const handleAdd = () => { countStore.dispatch({ type: ADD }); }; // minus 버튼이 클릭되면 action.type을 minus로 설정 const handleMinus = () => { countStore.dispatch({ type: MINUS }); }; add.addEventListener("click", handleAdd); minus.addEventListener("click", handleMinus);LIST