리액트의 상태 관리 관련 많은 라이브러리가 있지만 리덕스가 가장 많이 사용되고 있습니다.
물론 리덕스는 리액트가 없어도 사용할 수 있고 리액트도 리덕스 없이 Context API를 통해서 글로벌 상태 관리를 충분히 할 수 있습니다.
따라서 리덕스를 사용한다면 내 "애플리케이션에 반드시 리덕스가 필요한가?"를 고민해볼 필요가 있습니다.
내 애플리케이션에 앞서 말한 전역 상태가 필요할 경우, 빈번한 상태 업데이트 등.. 리덕스가 꼭 필요한 애플리케이션에 잘 사용한다면 유용하게 사용할 수 있지만 그렇지 않다면 오히려 독이 될 수 있습니다.
바닐라 자바스크립트를 이용하여 카운터를 예로 리덕스의 기본적인 사용 방법을 알아봅니다.
npm install redux
store
먼저 내 애플리케이션의 상태를 넣을 수 있는 공간을 만들어야 합니다. 이때 store는 단 하나의 store
를 즉 공간만을 사용할 수 있습니다.
createStore의 파라미터로 reducer라는 함수가 들어가 있는데 store(상태를 위한 공간)를 만들기 위해서는 반드시 필요하며 이는 상태를 수정할 수 있는 함수입니다.
import { createStore } from 'redux';
...
const store = createStore(reducer);reducer
const initialState = {
counter: 1,
}
const INCREMENT = "INCREMENT";
const DECREMENT = "DECREMENT";
function reducer(state = initialState, action) {
switch (action.type) {
case INCREMENT:
return {
...state,
counter: state.counter + 1,
}
case DECREMENT:
return {
...state,
counter: state.counter - 1,
}
default:
return state
}
}리듀서(reducer)는 수정을 위한 함수로 액션을 만들어서 발생시키면 리듀서가 현재 상태와 전달받은 액션 객체를 파라미터로 받아옵니다. 그리고 두 값을 참고하여 새로운 상태를 만들어서 반환해 줍니다.
이때 리듀서는 상태의 불변성을 유지하며 데이터에 변화를 주어야합니다.
리듀서를 거친 state가 변경되었는지를 검사하기 위해 state 객체의 "주소"를 비교합니다. 따라서 state를 복사하여 반환하게 되면 이전의 state와 다른 주소를 가리키기 때문에 state의 변경을 판단할 수 있습니다.
이때 참조형인 객체를 복사를 하기 위해서 { ...state }와 같이 spread operator 사용하거나 Object.assign()을 이용합니다.
const INCREMENT = "INCREMENT"; const DECREMENT = "DECREMENT";액션의 타입은 문자열이기 때문에 오타가 나더라도 에러를 발견하기 어려워 위와 같이 사용하면 오타가 발생했을 때 에러를 찾기 수월한 방법 중 하나입니다.
action
{ type: "INCREMENT" }상태에 변화가 필요하다면 action이라는 것이 발생하며, action은 반드시 object 형식이여야 하며 어떠한 action인지 반드시 type을 통해서 보내줘야합니다.
{
type: "INCREMENT",
data: {
id: 1
name: "testName",
}
}추가 옵션으로 상태 업데이트를 위한 참고 데이터를 작성자가 설정해 보내줄 수 있습니다.
dispatch
store의 내장 함수 중 하나로 리듀서에 action을 보내줄 수 있는 방법으로 액션을 발생시키는 것으로 생각할 수 있습니다.
store.dispatch({ type: "INCREMENT" })위처럼 store에 dispatch를 통해서 action 객체를 파라미터로 넣어 호출하며, 이 함수가 호출되면 store는 리듀서 함수를 실행시켜 새로운 상태를 만듭니다.
subscribe
sotre의 내장 함수 중 하나로 리스너 함수를 파라미터로 넣어 호출하면 해당 리스너 함수가 액션이 디스패치되어 상태가 업데이트될 때마다 호출됩니다.
