Redux
상태(state)관리 라이브러리
Redux = predictable state container for JavaScript apps.
= 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너
참고) Redux는 React와 독립적이다. = React없이 Redux만 사용이 가능하다.
목차
기본개념
예제를 통한 실습 #counter
기본개념
Redux는 상태(state)를 쉽게 관리해주는 도구이다. redux를 쓰기 위해 다음과 같은 재료들이 필요하다.
store : 상태(state)값 관련 통합 집합소
: 상태(state)값들이 적혀있음
: reducer(상태값을 변화시키는 함수)가 들어있음 //공구함 속 망치, 스패너와 비슷
action : 프로젝트 상태에 변화를 일으키기 위해 필요한 것
: 상태(state)값을 수정하기 위해 어떤 일을 해야하는지, 얼만큼 일해야 하는지 적혀있음
: type필드를 가짐
: ex) {type: INCREASE, payload}
reducer : 상태(state)값에 변화를 일으키는 함수
: (state, action)을 파라미터로 받음
dispatch : store에 들어있는 함수 중 하나
: 상태(state)값을 수정하기 위해, store.js로 요청을 보내는 함수
: action을 발생시키는 것
: 액션 개체를 파라미터로 사용
subscribe : store에 있는 함수 중 하나
: 리스너 함수를 파라미터로 호출
: 리스너 함수가 귀기울여 듣고 있다가, 상태(state)값이 바뀌면 재빨리 행동함
: 행동하기 위해선 구독이 되어있어야함
: store.subscribe(listener)
이것들이 다 무슨 말일까? 차근차근 알아보자. Redux에서 상태(state)를 쉽게 관리한다는 말은 구체적으로
CRUD에서 R, U를 잘 한다는 것이다.
즉, 상태(state)를
1. 쉽게 조회(R)하고,
2. 쉽게 수정(U)할 수 있다는 것이다.
1. 쉽게 조회(R)
깊숙한 곳에 위치한 component에까지 state를 보내는 것은 복잡하고 귀찮다. 해당 component에서 state를 불러와 쓰기 위해선, props로 매단계마다 전달해야 하기 때문이다. 그래서 한 곳에 창고(저장소 : store.js)를 만들어 state를 몰아넣고, 가져다 쓰기 쉽게 만든 것이 redux이다.
2. 쉽게 수정(U)
상태(state)값은 매우 소중한 정보이기 때문에 안전하면서도 유연하게 변경되는 것이 중요하다. 이를 dispatch 함수가 해준다. 또한 바뀐 정보를 고객한테 정확히 전달하는 것도 중요한데, 이를 subscribe 함수가 해준다.
예제를 통한 실습 #counter
// index.html
<html>
<body>
<p>0</p>
<button id="increase">1씩 증가</button>
</body>
<script src="'./index.js"></script>
</html>
// index.js
import { createStore } from 'redux';
const counter = document.querySelector('p');
const btnIncrease = document.querySelector('#increase');
const INCREASE = 'INCREASE'
const increase = payload => ( // action creator : action 개체를 만들어주는 함수
{type: INCREASE, payload} // action 개체
);
const initialState = { counter: 0 } // 초기 상태(state)값
function reducer(state = initialState, action) {
// 상태(state)값에 변화를 일으키는 함수들 집합소
switch(action.type) {
case INCREASE:
return {
...state,
counter: state.counter + action.payload
}
default:
return state;
}
}
const store = createStore(reducer); // store 안에 reducer 등록
const render = () => {
const state = store.getState(); // 상태(state)값 조회(R)하기
counter.innerText = state.counter
};
render();
store.subscribe(render); // 구독해둬서 state가 변할 때마다 rendering(갱신된 값을 보여줌)함
// 상태(state)값 수정(Update)
btnIncrease.onclick = () => {
store.dispatch(increase(1)); // 액션 개체를 파라미터로 받고, 이를 통해 상태(state)값을 변화시키러감
// = store.dispatch({type:INCREASE, 1})
}
참고자료
김민준 : 리액트를 다루는 기술
생활코딩 : https://www.youtube.com/playlist?list=PLuHgQVnccGMB-iGMgONoRPArZfjRuRNVc
