[React/Typescript] Zustand 사용기 (axios 요청 한 번으로 두 페이지에 데이터 보내기)

사용 배경

우리 팀은 상태관리 툴로 Zustand를 사용했다.
첫 리액트 프로젝트이다 보니 상태관리 툴을 왜 써야하는지가 와닿지 않아서 Redux 사용을 미루고 있었다.
근데 로그인 상태를 유지 시키기 위해서는 전역적으로 상태를 관리할 필요가 있다고 판단해 상태관리 툴의 도입을 고려하는데, 중간에 사용하려니까 Redux 설계를 할 생각에 좀 막막했다..

그러던 중 친구의 추천으로 zustand를 알게 되었는데, 사용법이 매우 간단하고 Redux와 같은 Flux 패턴을 사용하고 있어 개념을 따로 익히지 않아도 된다는 점이 팀원들에게도 부담이 덜 되겠다고 생각했다.

Zustand 사용법

설치

npm install zustand

사용법

일단 zustand는 create 함수를 통해 store를 생성 할 수 있다.
초기 설정이 이게 끝이다 so 간편
Provider로 감쌀 필요도 없다.
약간 커스텀 Hook을 만들어서 사용하는 느낌?! 그래서 일반적으로 store이름 앞에 use를 붙인다고 한다.

Typescript로 store 생성 후 바인딩 하여 사용하는 예제

// store 생성
import { create } from 'zustand'

type Store = {
  count: number
  inc: () => void
}

const useStore = create<Store>()((set) => ({
  count: 1,
  inc: () => set((state) => ({ count: state.count + 1 })),
}))

// 전역 state 및 action 함수 사용
function Counter() {
  const { count, inc } = useStore()
  return (
    <div>
      <span>{count}</span>
      <button onClick={inc}>one up</button>
    </div>
  )
}

문제 상황

1

로그인을 하는데 새로 고침을 하니까 state가 초기화 되어 버렸다..

2

이전 글을 보면 react-router-dom의 loader를 통해 두 개의 페이지(개인학습, 퀴즈)에서 사용할 일상생활 수어 openAPI 데이터를 한 번에 받아오게끔 구현했었다.
근데 loader는 데이터를 다 불러와야지만 화면 전환이 돼서, 사용자 입장에서 멈춘 화면을 보게 되는데 실제 웹 사이트를 사용할 때 이러면 사용자들이 다 떠나가게 된다..

그래서 React <Suspense>를 사용해 자식(개인학습, 퀴즈 페이지)이 로딩을 완료할 때까지 폴백을 표시하려고 했다.

근데.. Suspense로 두 페이지를 감싸도 제대로 동작하지 않았다 왜일까..
거의 하루 중 반을 잡고있었는데도 해결이 안돼서 zustand를 이용한 방법으로 해결했다.

해결 방법

1

새로 고침 시 초기화 되는 문제를 해결하기 위해 찾아보니 persist라는 메서드가 있어서 이를 활용해 상태를 유지시켜 줬다.

공식 문서의 Persisting store data

2

1. zustand의 fetchData라는 action 함수로 axios 요청 보낸 후 data(배열)라는 state에 return값을 저장하고, loading 이라는 state를 true로 변경했다.

2. 값을 넘겨 받을 페이지에서 data, loading state와 fetchData 함수를 호출해,
   useEffect에 data의 길이가 0이면 fetchData 함수를 실행하도록 작성했다.
   그리고 loading state를 이용해 삼항 연산자로 로딩 화면과 로딩 후 보여줄 페이지를 return 부분에 작성해줬다.

참고 자료
zustand 공식 문서