React에서 Redux 사용하기
github - https://github.com/FUNco247/Redux
강의 - https://nomadcoders.co/redux-for-beginners
홈페이지 - https://redux.js.org/
1. What is Redux?
간단 명료하게, 리덕스는 상태관리 툴이다. JS로 작동하는 앱에서 사용할 수 있다.
기본 컨셉은 브라우저에서 사용할 수 있는 로컬스토리지를 생각하면 된다.
리덕스 안에는 데이터(state of variables)를 저장하는store가 있고 state를 어떻게 변경할건지 action을 reducer를 통해 store에 저장한다. 이런 state controll 과정을 dispatch 라고 한다.
1-1. Redux vs LocalStorage
그렇다면 이미 사용해본 로컬스토리지를 리덕스로 대체해야 하는 이유는 무엇일까?
로컬스토리지에 데이터를 넣고 빼는 작업은 간단하지만 상태가 변함에 따라 우리의 컴포넌트가 반응하지 않는다. 리액트-리덕스가 주는 가장 큰 이점은 store에 저장해둔 데이터의 상태가 변함에 따라 우리의 컴포넌트가 반응한다는 것이다. 또한 데이터를 저장하고 꺼낼 때 stringify() 또는 parse 하는 작업도 줄일 수 있다.
1-2 Redux help all JS app
위 링크의 무료강의를 참고하면 Vanilla JS 앱에서 리덕스를 사용하는 법을 잘 알려준다. 하지만 이 포스팅에서는 강의 후단에 나오는 리액트에서 리덕스 사용하기를 기록하려 한다.
2. 시작하기
1) package.json
실습에 사용한 패키지들이다. 다음에 포스팅해볼 redux toolikt의 패키지까지 들어있다.
2) createStore
// store.js
import {createStore} from "redux"
const reducer = ...
const store = createStore(reducer);지금 redux로부터 createStore를 import 하면 사용을 권장하지 않고있다. 실제로 최신버전을 사용할 때는 import { legacy_createStore as createStore } from "redux"; 와 같이 불러와준다.
앞서 말했듯 store는 데이터를 저장하는 공간이며 crateStore 함수는 다시 reducer 라는 함수를 인자로 받는다.
reducer 함수에는 action 의 타입에 따라 데이터를 어떻게 변경할 것인지를 명시해주게 된다.
3) reducer
// store.js
const reducer = (state = [], action) => {
switch (action.type) {
case "ADD":
return [{ text: action.payload.text, id: action.payload.id }, ...state];
case "DELETE":
return state.filter((toDo) => toDo.id !== action.payload);
default:
return state;
}
};reducer 함수는 initial state와 action을 인자로 받는다. action의 type에 따른 동작을 지정해주고 새로운 state를 리턴한다. 여기서 중요한 점은 현재 state를 mutate 하지 않고 새로운 state를 리턴해야한다는 것이다.
state를 mutate 하면 기존 데이터를 가르키고 있는 주소값이 변하지 않은 채로 추가되거나 제거되는데, 그 결과 데이터의 변화를 알기 어려워지기 때문에 react component를 새 데이터로 렌더링하는 과정에서 최적화되지 않는다. 따라서 상태 변화를 정확히 알게 해주기 위한 작업이리고 할 수 있다.
4) dispatch(action)
// store.js
export const addToDo = (text, id) => {
return {
type: "ADD",
text,
id,
};
};
export const deleteToDo = (id) => {
return {
type: "DELETE",
id,
};
};
//Home.js
import { useSelector, useDispatch } from "react-redux";
import { addToDo, deleteToDo } from "./store";
function HomePage() {
...
const dispatch = useDispatch();
const onClick = () => {
const id = Date.now();
dispatch(addToDo({ text, id })); // the way to set multiple data in payload
};
const currentState = useSelector((state) => state);
const btnOnClick = (event) => {
const targetId = parseInt(event.target.parentNode.id);
dispatch(deleteToDo(targetId));
};
return (
<>
<h1>To Dos</h1>
<form onSubmit={onSubmit}>
<input type="text" value={text} onChange={onChange} />
<button onClick={onClick}>Add</button>
</form>
<ul>
{currentState.map((state) => (
...))}
</ul>
</>
);
}위처럼 useDispatch 훅을 통해 action을 전해주면 action을 reducer로 전달해 주고 전에 봤던 것과 같이 action type에 따른 동작을 수행하게 된다.
다음에는 리덕스를 사용하는 과정과 코드 작성을 편하게 해주는 redux-toolkit에 대해 포스팅 해보겠다.
