들어가기에 앞서
하단의 참고한 자료를 바탕으로 비전문가가 정리한 글이므로 오류가 있을 수 있습니다.
오류에 대한 피드백은 언제든지 환영합니다. 부디 댓글로 알려주시길 바랍니다. 감사합니다.
Zustand 가볍게 사용해 보기
Zustand는 가볍고, 사용하기 쉬운 상태 관리 라이브러리로, 리액트 애플리케이션에서 상태를 관리하는 데 유용합니다. 이 글에서는 Zustand를 사용하여 다양한 상태를 관리하는 간단한 예제를 소개합니다. 아래 코드를 기반으로 각 상태와 상태 변경 함수를 설정하는 방법을 살펴보겠습니다.
1. Zustand 설치
우선, Zustand를 설치해야 합니다. npm 또는 yarn을 사용하여 설치할 수 있습니다.
npm install zustand
# 혹은
yarn add zustand
Shell
복사
2. 상태 정의
Zustand를 사용하여 상태를 정의하려면, create 함수를 사용하여 상태와 상태 변경 함수를 설정합니다. 다음은 여러 상태를 관리하는 예제 코드입니다.
import { create } from 'zustand';
interface State {
trackingDenied: boolean;
setTrackingDenied: (trackingDenied: boolean) => void;
showAd: boolean;
setShowAd: (showAd: boolean) => void;
}
export const useStore = create<State>()((set) => ({
trackingDenied: false,
setTrackingDenied: (trackingDenied) => set({ trackingDenied }),
showAd: true,
setShowAd: (showAd) => set({ showAd }),
}));
TypeScript
복사
3. 상태 사용하기
이제 정의한 상태를 React 컴포넌트에서 사용할 수 있습니다. useStore 훅을 사용하여 상태를 가져오고, 상태 변경 함수를 호출하여 상태를 업데이트할 수 있습니다.
import React from 'react';
import { useStore } from './path/to/store';
const MyComponent = () => {
const {
trackingDenied,
setTrackingDenied,
showAd,
setShowAd,
} = useStore();
// 상태 및 상태 변경 함수를 사용하여 UI를 구성합니다.
return (
<div>
<p>Tracking Denied: {trackingDenied.toString()}</p>
<button onClick={() => setTrackingDenied(!trackingDenied)}>Toggle Tracking</button>
<p>Show Ad: {showAd.toString()}</p>
<button onClick={() => setShowAd(!showAd)}>Toggle Ad</button>
</div>
);
};
export default MyComponent;
TypeScript
복사
이 예제는 Zustand를 사용하여 다양한 상태를 관리하는 방법을 보여줍니다. useStore 훅을 통해 상태를 가져오고, 필요한 상태 변경 함수를 호출하여 상태를 업데이트합니다.
Zustand와 Context API 비교
Zustand와 Context API는 모두 React 애플리케이션에서 상태를 관리하기 위한 도구입니다. 각각의 장점과 단점을 이해하면, 프로젝트의 요구 사항에 따라 적합한 도구를 선택할 수 있습니다.
Zustand
장점:
1.
간단한 API: Zustand는 간결한 API를 제공하여 쉽게 상태를 정의하고 사용할 수 있습니다. 상태 변경 함수도 간단하게 설정할 수 있습니다.
2.
리액트 컨텍스트의 성능 문제 해결: Zustand는 컨텍스트 API의 성능 문제를 해결합니다. 상태가 변경될 때, Zustand는 필요한 컴포넌트만 리렌더링 하므로, 불필요한 리렌더링을 방지합니다.
3.
미들웨어 및 확장성: 상태를 추적하거나 로깅하는 미들웨어를 쉽게 추가할 수 있어 확장성이 뛰어납니다.
4.
서버사이드 렌더링(SSR) 지원: Zustand는 SSR을 잘 지원하므로, Next.js와 같은 프레임워크에서도 사용하기 적합합니다.
단점:
1.
추가 종속성: Zustand를 사용하려면 패키지를 설치해야 하므로, 프로젝트에 추가적인 종속성이 생깁니다.
2.
초기 학습 곡선: 처음 사용하는 경우, Zustand의 사용법을 익히기 위해 약간의 학습이 필요할 수 있습니다.
Context API
장점:
1.
내장 기능: Context API는 React에 내장되어 있으므로, 추가적인 패키지 설치가 필요 없습니다.
2.
간단한 공유 상태: 부모 컴포넌트에서 하위 컴포넌트로 간단하게 상태를 공유할 수 있습니다.
3.
사용 사례 이해: Context API는 리액트 공식 문서에 잘 설명되어 있어, 많은 개발자들이 사용 방법을 잘 알고 있습니다.
단점:
1.
성능 문제: Context API는 상태가 변경될 때 모든 하위 컴포넌트를 리렌더링하기 때문에, 대규모 애플리케이션에서는 성능 저하가 발생할 수 있습니다.
2.
복잡한 상태 관리: 복잡한 상태를 관리할 때는 Context API가 코드베이스를 복잡하게 만들 수 있습니다. 특히 상태가 여러 계층에 걸쳐 있을 때, 상태 관리가 어려워질 수 있습니다.
3.
동작 방식의 제약: Context API는 전역 상태를 관리하는 데 유용하지만, 다양한 상태 관리 요구 사항을 충족하기 위해서는 아래와 같이 프로바이더와 컨텍스트를 코드를 생성하고 , 프로바이더를 App.tsx에 추가하는 보일러플레이트 코드가 다소 필요합니다.
// MyProvider.tsx
import React, { createContext, useContext, useState, ReactNode } from 'react';
// Context 생성
const MyContext = createContext<any>(null);
// Provider 컴포넌트
export const MyProvider = ({ children }: { children: ReactNode }) => {
const [trackingDenied, setTrackingDenied] = useState(false);
const [showAd, setShowAd] = useState(true);
return (
<MyContext.Provider value={{ trackingDenied, setTrackingDenied, showAd, setShowAd }}>
{children}
</MyContext.Provider>
);
};
// App.tsx
import React from 'react';
import MyProvier from 'path/to/provider';
const App: React.FC = () => {
return (
<div className="App">
<MyProvider>
<Common />
<Uncommon />
</MyProvider>
</div>
)
}
TypeScript
복사
결론
Zustand와 Context API는 각각의 장점과 단점이 있습니다. 다음과 같은 상황에서 각각의 도구를 선택할 수 있습니다:
•
Zustand를 사용하는 경우:
◦
프로젝트에서 복잡한 상태 관리가 필요한 경우
◦
상태 변경 시 불필요한 리렌더링을 최소화하고 싶은 경우
◦
상태 관리와 관련된 미들웨어를 쉽게 추가하고 싶은 경우
•
Context API를 사용하는 경우:
◦
간단한 상태 공유가 필요한 경우
◦
추가적인 종속성을 피하고 싶은 경우
◦
프로젝트 규모가 작아서 성능 문제가 크게 우려되지 않는 경우
상황에 맞게 두 도구 중 적합한 것을 선택하여 사용하면, 보다 효율적인 상태 관리를 할 수 있습니다.
마치며
Zustand는 간단하고 직관적인 API를 제공하여 상태 관리를 쉽게 해줍니다. 따라서 리액트 애플리케이션에서 상태 관리를 간편하게 하고 싶다면 Zustand를 고려해보세요.
