인프런 커뮤니티 질문&답변

SJ님의 프로필 이미지
SJ

작성한 질문수

기초부터 배우는 Next YTMusic 클론 코딩 (with next.js 14, UI 마스터)

YTMusicClone - Home

zustand 상태관리

해결된 질문

작성

·

203

0

안녕하세요 !

강의따라서 zustand 라는 상태관리 지금 사용해보고있는데요

강사님은 현업에서 백엔드와 같이 작업하시면서 zustand 사용하고 계시나요 ?? 만약 사용하고 계신다면 제한사항이나 불편한것들이 있었나요 ??

답변 1

0

도도(코딩루팡)님의 프로필 이미지
도도(코딩루팡)
지식공유자

현업에서는 Redux를 쓰고 있어요. ㅠㅜ

신규 프로젝트 한다면 Zustand를 도입할것 같네요.

 

특히 비동기 처리 부분의 경우 Redux는 thunk, saga를 이용하는데요.

zustand는 JS의 비동기처리 방식과 거의 유사하게 가능하죠.

 

아래는 zustand에서 API 처리하는 예시인데, 이런 경우도 고려하면서 사용하면 문제없겠네요.!

import create from 'zustand';

const useStore = create((set) => ({
  data: null,
  loading: false,
  error: null,
  controller: null, // AbortController를 저장할 상태
  fetchData: async () => {
    set((state) => {
      // 기존 요청 취소
      if (state.controller) {
        state.controller.abort();
      }
      // 새로운 AbortController 생성
      const controller = new AbortController();
      return { loading: true, error: null, controller };
    });

    try {
      const response = await fetch('https://api.example.com/data', {
        signal: get().controller.signal,
      });
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      const data = await response.json();
      set({ data, loading: false, controller: null });
    } catch (error) {
      if (error.name === 'AbortError') {
        console.log('Fetch aborted');
      } else {
        set({ error, loading: false, controller: null });
      }
    }
  },
  resetData: () => set((state) => {
    // 기존 요청 취소
    if (state.controller) {
      state.controller.abort();
    }
    return { data: null, loading: false, error: null, controller: null };
  }),
}));

export default useStore;

SJ님의 프로필 이미지
SJ
질문자

감사합니다 !

SJ님의 프로필 이미지
SJ

작성한 질문수

질문하기