들어가기 전
State의 종류
- Local State : 각각의 컴포넌트가 소유하고 있는 상태를 의미. 이 상태는 해당 컴포넌트 내에서만 관리되고 사용됨
- Cross-Component State : 두 개 이상의 컴포넌트 간에 공유되는 상태를 의미하며 props를 통해 상태를 전달
- App-Wide State : 애플리케이션의 전체 영역에서 사용되는 상태. 여러 컴포넌트 혹은 앱의 전체 영역에서 공유되어야하는 데이터나 상태에 사용됨
Redux
❓ Redux란?
- Javascript 상태관리 라이브러리
- 리액트를 배울 때 많이 나오는 용어지만, 꼭 리액트에 종속되는 개념은 아님
- Redux(리덕스)의 본질은 Node.js 모듈이다.
📖 Redux의 기본 개념 : 세 가지 원칙
1. Single source of truth
- 동일한 데이터는 항상 같은 곳에서 가지고 온다.
즉, 스토어라는 하나뿐인 데이터 공간이 있다는 의미
2. State is read-only
- 리액트에서는 setState 메소드를 활용해야만 상태 변경이 가능하다.
- 리덕스에서도 액션이라는 객체를 통해서만 상태를 변경할 수 있다.
3. Changes are made with pure functions
- 변경은 순수함수로만 가능하다.
- 리듀서와 연관되는 개념
- Store(스토어) - Action(액션) - Reducer(리듀서)
Store, Action, Reducer의 의미와 특징
🏬Store (스토어)
Store(스토어)는 상태가 관리되는 오직 하나의 공간
- 컴포넌트와는 별개로 스토어라는 공간이 있어서 그 스토어 안에 앱에서 필요한 상태를 담는다.
- 컴포넌트에서 상태 정보가 필요할 때 스토어에 접근한다.
- 스토어 안에는 현재 애플리케이션 상태와 리듀서가 들어가 있다
- 한 개의 프로젝트 단 하나의 스토어만 가질 수 있다
- 스토어에 있는 데이터는 컴포넌트에서 직접 조작하지 않는다. -> 리듀서 함수를 사용
🐱🏍Action(액션)
Action(액션)은 앱에서 스토어에 운반할 데이터를 말한다.
자바스크립트 객체 형식으로 되어있다.
- 상태에 어떠한 변화가 필요하면 액션(action)이란 것이 발생
- Action은 컴포넌트에서 store에 운반할 데이터를 말한다.
- Reducer가 수행할 작업을 설명한다.
📄 Reducer(리듀서)
- Action의 type에 따라 변화를 일으키는 함수
- 첫번째 매개변수는 현재 상태값, 두번째 매개변수는 Action의 값을 받는다.
- Action을 Store에 바로 전달하는 것이 아니라 Reducer가 주문을 보고 Store의 상태를 업데이트 하는 것
- Action을 Reducer에 전달하기 위해서는 dispatch 메소드를 사용해야된다.
🧾 Redux 상태관리 도식화
❓ 왜 이런 공식을 따를까?
- 이유는 데이터가 한 방향으로 흘러야 하기 때문
👀 Redux의 장점
- 상태를 예측 가능하게 만든다. (순수함수를 사용하기 때문)
- 유지보수 (복잡한 상태 관리와 비교)
- 디버깅에 유리
- 테스트를 붙이기 용의
자바스크립트로만 리덕스 사용해보기
결과물
1. 그냥 자바스크립트
index.html
<body>
<button id="add">ADD</button>
<span id="num"></span>
<button id="minus">MINUS</button>
</body>index.js
const add = document.querySelector("#add");
const minus = document.querySelector("#minus");
const num = document.querySelector("#num");
let count = 0;
add.addEventListener("click", () => {
count += 1;
num.textContent = count;
});
minus.addEventListener("click", () => {
count -= 1;
num.textContent = count;
});2. 리덕스를 사용
index.html
<body>
<button id="add">ADD</button>
<span id="num"></span>
<button id="minus">MINUS</button>
</body>index.js
const add = document.querySelector("#add");
const minus = document.querySelector("#minus");
const num = document.querySelector("#num");
//리듀서
const countReducer = (state = 0, action) =>{
switch(action.type){
case "ADD":
return state + 1;
case "MINUS":
return state - 1;
default:
return state;
}
};
//store는 데이터를 저장하는 곳
//createStore : store를 생성, 리듀서 함수가 필수임
const countStore = createStore(countReducer);
//subscribe()는 데이터와 저장소가 변경될 때마다 콜백함수를 실행
countStore.subscribe(()=>{
//getState()는 저장소에서 최신상태의 값을 반환할 때 쓰는 메소드
num.textContent = countStore.getState();
});
add.addEventListener("click", () =>{
countStore.dispatch({ type : "ADD"});
});
minus.addEventListener("click", () => {
countStore.dispatch({ type : "MINUS"});
});
꾸준히합니다.