우리 회사 프로젝트에서 상태관리 라이브러리로 redux와 redux-saga를 사용하고 있다. 얼마전에 전에 서버 상태 관리를 위한 라이브러리로 react-query를 도입하여서 redux-saga가 필요없어졌지만 아직 전역상태를 관리하는 라이브러리는 redux이다. 그래서 유명하고 많은 라이브러리중(recoil, zustand, jotai 등등) 무엇을 선택해 교체할지 고민하다 zustand로 선택하였다.
[ redux 제거 이유 ]
리덕스를 제거하는 이유는 상태관리를 리덕스로 해본 사람이라면 다 알고 있을 것이다. 보일러 플레이트 코드가 너무 많다. 간략하게 정리해보자면 react-query도입기 블로그에 적어놓은 부분을 가져왔다.
리덕스 동작방식은 상태변화가 필요할때 action을 발생시킵니다. 이때 액션은 하나의 객체로 이루어져있다.
이때 액션생성함수(action creator)를 통해 액션을 생성함 단순히 인자를 받아 액션객체형태로 만들어준다.
리듀서는 현재 상태와 새롭게 전달받은 액션 두가지를 파라미터로 받고 현재의 상태와 새로운 액션을 참조하여 새로운 상태값을 반환해주는 것을 리듀서라고 한다.
그리고 이를 다시 store에 저장한다.
여기에 서버상태관리를 위해선 서드파티 라이브러리 saga를 도입해야한다.
문제 발생
- api통신 코드가 너무 많아짐
- 에러처리
- 반복적인 구조로 계속 이루어지는 API통신코드
- 작은 기능이라도 리덕스로 구현하는 순간 상당한 보일러 플레이트 코드(액션 타입, 액션 생성함수, 리듀서,…,)[ zustand 선택 이유 ]
zustand는 간단한 Flux 원칙을 사용하는 작고 빠르고 확장 가능한 상태 관리 솔루션이며, Hook 기반으로 하는 편리한 API가 있다.
- 아래 코드로 정리해 둔 부분을 보면 알 수 있듯 보일러 플레이트 코드가 적고 사용이 너무 간단하다. 그만큼 러닝커브도 낮다는 뜻이다.
- redux의 Redux DevTools로 디버깅 할 수 있어 그 전에 리덕스를 사용했던터라 디버깅을 쉽게 할 수 있다.
- jotai와 달리 Provider로 래핑하지 않아도 된다.
- 불필요한 렌더링 최소화한다. 상태 업데이트가 UI렌더링을 일으키지 않도록 설정 할 수도 있는 등 대규모 애플리케이션에서 성능을 크게 향상시킬 수 있다.
[ 사용 ]
-
npm install zustand -
store 생성
import { create } from 'zustand';
const initialState = {
detail: {
memberIdx: '',
members: [],
message: '',
startDate: '',
title: ''
}
};
const useMemberStore = create((set) => ({
detail: initialState.detail,
setDetail: (newDetailData) => set({ detail: newDetailData }),
resetDetail: () => set({ initialState })
}));
export default useMemberStore;
- 컴포넌트에 바인딩
import useMemberStore from 'store/member';
const Detail = ({ data }: DetailProps) => {
const { setDetail, resetDetail } = useMemberStore();
useEffect(() => {
setDetail(data);
// 페이지 언마운트시 해당 store 초기화
return () => {
resetDetail();
};
}, []);
return (
...
)
}[참고]
