1. 리덕스(Redux)란?
리덕스(Redux)는 Javascript app을 위한 예측가능한 state container이다. 리액트 뿐만 아니라 Augular, jQuery, vanilla JavaScript 등 다양한 framework와 작동되게 설계되었다.
리덕스는 리액트의 멋진 보완재이다. action에 반응하여 상태를 변경하기 때문에, 리액트 같이 UI를 상태에 대한 함수로 기술하는 프레임워크와 특히 잘 어울리기 때문이다.
2. React에 Redux를 사용하는 이유?
애플리케이션의 모든 상태는 하나의 저장소 안에 하나의 객체 트리 구조로 저장됩니다.
- DOM과 DOM이 서로 직접적으로 연결되다 보면 복잡도 상승
- 우리가 처음 React의 state 개념을 배우면서 가장 크게 마주한 변화는 데이터 흐름
- state 기반의 단방향 데이터 흐름을 통해 상태값과 레이아웃을 분리할 수 있게 됨
- 하지만 props drilling 등의 문제로 인해 다시 한번 성능 하락 및 복잡도 상승 문제점 노출
- 페이스북 ⇒ notification이 확인 후에도 제대로 사라지지 않는 버그를 해결하기 위해 갖은 애를 썼음
가벼운 프로젝트의 장바구니를 예로 들자면, 관리를 위해 최상단에서 state를 만들어 각 component에 props로 전달하여 관리를 할 수 있다. 하지만, 이 프로젝트가 커진다면?? component의 수가 늘어나게되면 props를 전달 하기 위해 필요없는 data의 흐름이 생기게 된다.
하지만 리덕스를 사용하게 되면, 하나의 store를 동해 global state를 포함한, 모든 state를 저장하고 유지할 수 있게 되며, 원하는 component로만 data를 전달할 수 있다.
3. Redux의 기본 개념
- Actions(액션) : 어플리케이션의 store 즉 저장소로 data를 보내는 방법이다. view에서 정의되어 있는 액션을 호출하면 action creator는 어플리케이션의 state를 변경한다.
const ADD_TODO = 'ADD_TODO' // action의 type을 정의
action의 type은 일반적으로 ㅁ누자열 상수로 정의된다. 정의된 type은 creators를 통해 사용된다.
function addTodo(text) {
return {
type: ADD_TODO,
text
}
}
- Reducers : action을 통해 어떠한 행동을 정의했으ㅕㅁㄴ 그 결과 어플리케이션의 상태가 어떻게 바뀌는지는 특정하게 되는 함수이다.
function todoApp(state = initialState, action) {
switch (action.type) {
case SET_VISIBILITY_FILTER:
return Object.assign({}, state, {
visibilityFilter: action.filter
});
default:
return state
}
}
- store : 무엇이 일어날지를 나타내는 action, 그리고 action에 따라 상태를 수정하는 reducer를 저장하는 단 하나의 객체이다.
import { createStore } from 'redux';
import todoApp from './reducers';let store = createStore(todoApp);
