Zustand로 React 상태 관리 간단 찍어먹기

<SeongHun />·2022년 12월 8일
0

React

목록 보기
1/1
post-thumbnail

설치

npm install zustand # or yarn add zustand



공부를 위한 활용 예제

getData.jsx 에서 getItemData 함수를 통해 비동기 요청을 보낼 때 paramsitemId가 필요한 상황인데, itemId는 세션 스토리지에 저장되어 있다. itemId를 다른 컴포넌트에서도 쉽게 꺼내서 사용하고 싶은 상황이라면?!
(사실 세션 스토리지에 저장되어 있어서 어디서든 쉽게 꺼내서 사용할 수 있다.)

아래와 같은 코드를 사용할 수 있다.

store.js

import create from "zustand";

const useStore = create((set) => ({
  itemId: window.sessionStorage.getItem("itemId"),
}));

export default useStore;

import create from "zustand";를 통해 create 메서드를 가져온다.
create 메서드를 사용해 데이터를 저장해 준다. 이때 useStore처럼 유니크한 이름일 필요 없이 potato 같은 식별자명도 사용 가능하다.


getData.jsx

import useStore from "../../store";

...

// store.js에 저장된 plugtestId 불러오기
const { itemId } = useStore();

// 데이터 요청
const getItemData = async () => {
  const response = await axios.get("/api/url", {
    params: {
      itemId: itemId,
    },
  });
};

이때, 주의할 점은 {itemID} 값을 가져올 때 해당 상태값이 존재하는 파일을 import 해야된다!
import useStore from "../../store" 이와 같은 경로 파일에 실제 상태값 useStoreitemId가 존재하므로 위와 같은 경로로 import 해야된다. 자동완성 기능에 의해 import … from “zustand”로 설정될 때가 있는데 만약, 불러오지 못 하면 경로를 확인해 보자!



리덕스의 보일러플레이트 코드보다 간단하게 React 상태 관리를 할 수 있어서 좋았다.
다른 프로젝트때 많이 활용할 듯 하다!



참고

profile
프론트엔드 개발자..? 쉽지 않겠는걸.. 그치만 재밌는데? 좋아~ 가보자구!

0개의 댓글