npm install zustand # or yarn add zustand
getData.jsx
에서 getItemData
함수를 통해 비동기 요청을 보낼 때 params
로 itemId
가 필요한 상황인데, itemId
는 세션 스토리지에 저장되어 있다. itemId
를 다른 컴포넌트에서도 쉽게 꺼내서 사용하고 싶은 상황이라면?!
(사실 세션 스토리지에 저장되어 있어서 어디서든 쉽게 꺼내서 사용할 수 있다.)
아래와 같은 코드를 사용할 수 있다.
import create from "zustand";
const useStore = create((set) => ({
itemId: window.sessionStorage.getItem("itemId"),
}));
export default useStore;
import create from "zustand";
를 통해 create
메서드를 가져온다.
create
메서드를 사용해 데이터를 저장해 준다. 이때 useStore
처럼 유니크한 이름일 필요 없이 potato
같은 식별자명도 사용 가능하다.
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"
이와 같은 경로 파일에 실제 상태값 useStore
와 itemId
가 존재하므로 위와 같은 경로로 import
해야된다. 자동완성 기능에 의해 import … from “zustand”
로 설정될 때가 있는데 만약, 불러오지 못 하면 경로를 확인해 보자!
리덕스의 보일러플레이트 코드보다 간단하게 React 상태 관리를 할 수 있어서 좋았다.
다른 프로젝트때 많이 활용할 듯 하다!