728x90
📌 Redux
- 자바스크립트 상태관리 라이브러리로, 리액트에 종속되는 개념이 아니다.
- 리액트의 상태 관리 라이브러리로 가장 많이 사용된다.
- 많은 양의 props를 이용하지 않고, 전역으로 상태를 관리하기 위해 사용한다.
- store라는 곳에 상태를 저장하고, 언제든지 꺼내 쓸 수 있다.
💡 Store
- 상태가 관리되는 '오직 하나의' 공간이다.
- 현재 애플리케이션 상태와 리듀서가 들어있다.
- 한 개의 프로젝트는 단 하나의 스토어만 가질 수 있다.
- 스토어에 있는 데이터는 리듀서 함수를 사용하여 다루며, 컴포넌트에서 직접 조작하지 않는다.
💡 Action
- 컴포넌트에서 store에 운반할 데이터를 뜻한다.
- 하나의 객체로 표현된다.
💡 Dispatch
- 액션을 발생시킨다.
- dispatch(action)과 같은 형태로, 액션 객체를 파라미터로 넣어서 호출한다.
💡 Reducer
- 액션의 타입에 따라 변화를 일으키는 함수이다.
- 첫번째 매개변수는 현재 상태값, 두번째 매개변수는 액션 값을 받는다.
- 항상 새로운 상태의 객체를 반환하며, http요청이나 데이터 저장 등의 요청은 불가능하다.
- 반환하는 값은 state와 동일한 형태이다. (state는 배열인데, return null 불가능)
💡 Redux 사용하기
/*index.html*/
<body>
<button id="add">ADD</button>
<span id="num">0</span>
<button id="minus">MINUS</button>
</body>- 설치 npm i redux
- store 생성: createStore() - 리듀서 함수 필수
- reducer 함수 생성
- 액션 발생: dispatch()
- 생성된 store에서 최신 상태의 값을 반환: getState()
- 최신 상태의 값을 반환하는 getState()는, 주로 데이터와 저장소가 변경될 때마다 함수를 실행시키는 subscribe()와 함께 사용한다.
import { createStore } from "redux";
const add = document.querySelector("#add");
const minus = document.querySelector("#minus");
const num = document.querySelector("#num");
// 아래와 같이, 액션을 변수로 설정하는 것이 좋음 (오타 있을 때, 오류로 인식함)
const ADD = "ADD";
const MINUS = "MINUS";
// reducer 함수 생성
const countReducer = (state = 0, action) => {
switch (action.type) {
case ADD:
return state + 1;
case MINUS:
return state - 1;
default:
return state;
}
};
// store 생성
const countStore = createStore(countReducer);
console.log(countStore); // getState 포함되어 있는 것을 확인할 수 있다.
// subscribe()
countStore.subscribe(() => {
num.textContent = countStore.getState();
});
// 클릭이벤트 추가 - dispatch()로 액션 발생
add.addEventListener("click", () => {
countStore.dispatch({ type: ADD });
});
minus.addEventListener("click", () => {
countStore.dispatch({ type: MINUS });
});728x90
'포스코x코딩온 웹 풀스택 양성과정' 카테고리의 다른 글
| [포스코x코딩온] 웹 풀스택 과정 14주차 회고 | Typescript (0) | 2024.04.05 |
|---|---|
| [포스코x코딩온] 웹 풀스택 과정 14주차 회고 | React Redux (0) | 2024.04.05 |
| [포스코x코딩온] 웹 풀스택 과정 14주차 회고 | React Context (0) | 2024.04.05 |
| [포스코x코딩온] 웹 풀스택 과정 13주차 회고 | React Hook Form (0) | 2024.04.05 |
| [포스코x코딩온] 웹 풀스택 과정 13주차 회고 | React Router (0) | 2024.04.05 |