리덕스(Redux)란?
자바스크립트 상태 관리 라이브러리입니다.
리덕스(Redux)는 Javascript app을 위한 예측 가능한 state container입니다.
React 뿐만 아니라 Angular, jQuery, vanilla JavaScript 등 다양한 framework와 작동되게 설계되어있습니다.
React에 리덕스(Redux)가 필요한 이유?
리덕스는 action에 반응하여 상태를 변경하기 때문에 리액트 같이 UI를 상태에 대한 함수로 기술하는 프레임워크와 잘 어울리기 때문입니다. 또, 리액트에서 component는 local state를 가지게 되고, 애플리케이션은 global stae를 가지게 됩니다.
Redux 장점
상태를 예측 가능하게 만듭니다.(순수 합수를 사용하기 때문)
유지보수가 좋습니다. (복잡한 상태 관리와 비교)
디버깅에 유리합니다. (action과 state log 기록 시 -> redux dev tool (크롬 확장))
테스트를 붙이기 용의합니다. (순수 함수를 사용하기 때문)
중요 키워드 및 개념
Action
사용자에 의해서 상태 변화(ex: 버튼을 눌렀을 경우)가 생길 때 이것을 액션이 발생한다고 말합니다.
아래와 같이 타입과 value로 이루어져있습니다. type은 무조건 들어가야 하며 value는 자유롭게 설정해도 됩니다.
{
type: "PUSH_BUTTON"
button: "pushed"
}
// 혹은
{
type: "PUSH_BUTTON"
isToggle: true
}
Reducer
변화를 일으키는 함수입니다.
useReducer()와 똑같은 형태를 가지고 있으며,
현재의 상태(state)와 전달받은 액션(action)을 파라미터로 받고,
새로운 상태의 값을 반환합니다.
Store
리덕스에서는 단 하나의 스토어를 만들게 되는데,
이 스토어 내부에는 현재의 앱 상태(state)와 리듀서(reducer)가 들어가 있습니다.
예제 코드
// 리덕스를 가져온다.
const redux = require('redux');
// 리듀서 - 새로운 상태를 생성
const counterReducer = (state = { counter: 0 }, action) => {
if (action.type === 'increment') {
return {
counter: state.counter + 1,
};
}
if (action.type === 'decrement') {
return {
counter: state.counter - 1,
};
}
return state;
};
// 저장소
const store = redux.createStore(counterReducer);
// 구독자 함수
const counterSubscriber = () => {
const latestState = store.getState();
console.log(latestState);
};
store.subscribe(counterSubscriber);
// 액션을 발송
store.dispatch({ type: 'increment' });
store.dispatch({ type: 'decrement' });
// 출력 결과
// 위에서 increment로 인해 0에서 +1로 1이 출력되었다. { counter: 1 }
// 1이 된 상태에서 decrement를 해서 -1로 0이 출력되었다. { counter: 0 }
'프론트엔드 > React' 카테고리의 다른 글
[ React ] toISOString()를 사용하여 시간 출력하기 (0) | 2022.12.04 |
---|---|
[ React ] VSCode에서 create-react-app 설치방법, 현재폴더에서 리엑트 설치방법 (0) | 2022.11.30 |
[React] 리액트, 컴포넌트, DOM 이해 (0) | 2022.07.13 |
[직무 면접 대비] React 인터뷰 질문 1 (0) | 2022.02.17 |
[React] React란? - 라우터 (0) | 2022.02.15 |
댓글