리액트 컨텍스트 - useContext, zustand

 

useContext

정의

리액트의 useContext는 리액트 훅 중 하나로, 컨텍스트(Context)를 쉽게 사용하게 해주는 훅입니다. useContext를 사용하면 컨텍스트 API를 통해 전역적으로 상태를 관리하거나, 컴포넌트 트리에서 prop drilling을 피할 수 있습니다.

---

zustand

전역 상태 관리의 대표적인 라이브러리

import { create } from "zustand";

type CountStore = {
  count: number;
  increment: () => void;
  decrement: () => void;
  reset: () => void;
};

export const useCountStore = create<CountStore>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set((state) => ({ count: state.count })),
  // reset: () => set({ count: 0 }),
}));

import { useCountStore } from "./countStore";

const App = () => {
  const count = useCountStore((state) => state.count);
  const increment = useCountStore((state) => state.increment);
  const decrement = useCountStore((state) => state.decrement);
  const reset = useCountStore((state) => state.reset);
  return (
    <>
      <h1>Count: {count}</h1>
      <button onClick={increment}>클릭</button>
      <button onClick={decrement}>감소</button>
      <button onClick={reset}>제로</button>
    </>
  );
};
export default App;

 

[스나이퍼 팩토리 2기 과정]

본 학습 자료 및 코드는 수코딩님의 자료를 이용하였습니다. [수코딩(https://www.sucoding.kr)] 출처