- Redux란?
- React에서 Redux를 사용하는 이유
- 사용방법
Redux란?
예측 가능한 State(상태) 저장소를 말합니다. 사실
Redux는 React뿐만 아니라 JavaScript를 사용하는 다양한 곳에서 사용할 수 있습니다. 이번 포스트에선 React에서 사용하는 Redux를 알아보겠습니다.
React에서 Redux를 사용하는 이유
Redux는 하나의 State를 갖는 것이 특징입니다. 중앙 저장소의 역할을 하여 여러 곳에 흩어져 있는 부분에 데이터를 전달하기 쉽도록 합니다.
-
A컴포넌트에 State가 있고,H컴포넌트에서 해당 State를 사용한다고 하면 중간에 존재하는E,G컴포넌트는 State가 필요하지 않음에도 props를 자식 컴포넌트에 넘겨주어야 합니다.
Redux의 경우, 중앙 상태 저장소가 있고 어디서든 해당 저장소에 접근할 수 있으므로 이런 문제를 해결할 수 있습니다. -
서로 다른 Component가 동일한 데이터를 다룰 때, 서로 다른 출처로 가지고 오는 것은 피해야 합니다. 이는 데이터 무결성을 위해, 동일한 데이터는 항상 같은 곳에서 가지고 오도록 하기 위함입니다.
-
디버깅하기 용이합니다. 크롬 확장프로그램인
Redux DevTools를 이용한time-travel debugging을 할 수 있습니다.
사용방법
설치
- npm install redux
- yarn add redux
Store
state를 관리하는 저장소의 역할을 합니다. redux의 메소드인
createStore로reducer를 연결하여 스토어를 생성할 수 있습니다.
import { createStore } from 'redux';
const store = createStore(Reducer);Reducer
현재 State와
action을 전달받아 새로운 State를 만들어 내는 pure function입니다.
- 아래는 두번째 인자로
action을 받아 조건에 따라 state를 증가, 감소 시키는 Reducer입니다. 이렇게 만든 함수를 store와 연결하면 됩니다.
const Reducer = (state = 0, action) =>{
switch(action.type){
case 'INCREMENT':
return state + 1
case 'DECREMENT':
return state - 1
}
}Reducer의 불변성(Immutability)
- Reducer 함수를 정의할 때 주의할 점이 있는데, 항상 state를 바꿀땐, immutable한 방식으로 변경해야 합니다. 이는 Redux를 사용하는 이유중 하나인
time-travel debugging을 할 수 있도록 하기 위함입니다.
Action
말 그대로 어떤 action을 취할 것인지 정의해 놓은 객체입니다.
- 다음과 같이 정의하며, 객체이므로 다양한 데이터를 추가할 수 있습니다.
const increment = {type: 'INCREMENT'}
const decrement = {type: 'DECREMENT'}Dispatch
reducer로action을 전달하는 메소드 입니다.
- 다음과 같이 사용할 수 있으며, 인자로 action을 입력할 수 있습니다.
store.dispatch(increment)
store.dispatch(decrement)
// action을 변수에 할당하지 않고, 바로 넣을 수도 있습니다.
store.dispatch({ type: 'INCREMENT' })
store.dispatch({ type: 'DECREMENT' })