[최종프로젝트] 쥬스탄드 (Zustand)

스토어에 데이터 저장(디스패치와 같음)

 const { form: keywordInput, onChange } = useInput({
    keyword: "",
    selectedTabs: "musicInfo",
  });
  const { keyword, selectedTabs } = keywordInput;
  const searched = useSearchedStore((state) => state.searched); // 스토어에서 set 함수 가져오기 (유즈셀렉토와 같음)
  const router = useRouter();
  const keywordRef = useRef<HTMLInputElement>(null);

  const onSubmitHandler = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (!keyword) {
      alert("검색 키워드를 입력해 주세요");
      return keywordRef.current?.focus();
    }
    searched(keyword, selectedTabs); // 스토어 set 함수에 저장할 값 넣어주기 (디스패치에 페이로드 넣어주는것과 같음)
    router.push("/search");
  };

---

 

스토어에 저장된 데이터 사용

const Search = () => {
  const { searchedKeyword } = useSearchedStore();
  
  // 스토어에 저장된 데이터 가져오기
  const { keyword, selectedTabs } = searchedKeyword;
  
  const [musicInfoResult, setMusicInfoResult] = useState<MusicInfoDataType>();
  const [communityResult, setCommunityResult] = useState<CommunityDataType>();

  useEffect(() => {
    const fetchData = async () => {
      if (selectedTabs === "musicInfo") {
        const { data } = await getMusicInfoData(keyword);
        setMusicInfoResult(data);
      }
      if (selectedTabs === "community") {
        const { data } = await getCommunityData(keyword);
        setCommunityResult(data);
      }
    };
    fetchData();
  }, [keyword, selectedTabs]);

  return (
    <div>
      <SearchComponent />
      <div>
        {selectedTabs === "musicInfo"
          ? musicInfoResult?.map((item) => {
              return <SearchedMusicData key={item.musicId} item={item} />;
            })
          : communityResult?.map((item) => {
              return <SearchedCommunityData key={item.boardId} item={item} />;
              // 썸네일 속성 필수래서 넣어줬는데 계속 빨갛게 뜸 기능은 정상작동
            })}
      </div>
    </div>
  );
};

---

스토어

type SearchedKeywordStore = {
  searchedKeyword: {
    keyword: string;
    selectedTabs: string;
  };
  searched: (keyword: string, selectedTabs: string) => void;
};
// 크리에이트 함수의 반환값도 타입을 지정해줘야한다 지정하지 않을 경우, initialState의 타입으로 추론해버림 그래서 외부에서searched함수를 사용할 수 없음

const initialState = {
  searchedKeyword: {
    keyword: "",
    selectedTabs: "musicInfo",
  },
};

export const useSearchedStore = create<SearchedKeywordStore>((set) => ({
  ...initialState,
  searched: (keyword: string, selectedTabs: string) =>
    set({ searchedKeyword: { keyword, selectedTabs } }),
}));

 

---

브라우저 로컬스토리지에 저장하는 방법 (플레이 리스트)

export const useCustomListMusicStore = create(
  persist<customListMusicStore>(
    (set, _) => ({
      ...customListMusicState,
      customListMusic: (customPlayList: CurrentPlayListType[]) => {
        set({ customListData: { customPlayList } })
      },
    }),
    {
      name: 'customListMusicStore',
    },
  ),
)