유저 정보 관리 feat. react-query VS zustand

문제 상황

유저 정보 특징

1. 서버에서 받아오는 데이터

2. 초기상태값으로 가지고 있어야 함 (프리패칭 필요)

3. 수정 요청으로 변할 수 있음

나(동건)는 왜 react-query 로 관리되어야 한다고 생각했나?

논의할 당시 신경쓰였던 부분

• 사용자가 어떤 페이지에서 처음으로 웹앱을 켤지 모름
• 유저 정보 특성상 프리패칭(미리 가져오기)이 필요한데 어떤 페이지에서 가져와야될 지 모르다보니 유저 정보를 사용하는 모든 컴포넌트가 useQuery 로 사용자 정보를 가져올 수 있도록 하는 방법을 생각했었음
QnA
Q1. 유저 정보를 로그인할 때만 가져오면 안되나? A. 로그인을 유지하고 있는 상태에서 처음 켜지는 페이지가 “로그인 페이지”가 아니라 다른 페이지일 시 유저 정보 가져올 수 없음 Q2. 헤더 컴포넌트에서 유저 정보 요청을 보내면 되지 않나? A. 헤더가 유저 정보를 담당하는게 관심사(의미) 측면에서 맞지 않은 것 같음 + 헤더가 요청을 보낸 상태(pending)일 때 다른 컴포넌트들은 유저 정보로 undefined를 받고 오류가 남 Q3. 유저 정보에 초기값(initialState)을 넣어주면 되지 않나? A. 유저 정보의 ID 값은 서버에 요청을 보낼때 사용되므로 초기값으로 대체할 수 없음

이 방법은 useQuery 로 유저 정보를 가져오는 모든 컴포넌트가 isLoading 상태값을 관리해야돼서 굉장히 번거롭고 효율적이지 않음

• 훈오님 & 민호님이 알려주신 방법

App.tsx 최상위 컴포넌트에서 유저 정보를 웹앱 켜질때 한 번만 가져오면 깔끔

⇒ isLoading 도 최상위에서 한 번에 관리할 수 있음 ⇒ 유저 정보를 사용하는 컴포넌트에서 유저 정보를 가져오는 비동기 요청을 신경쓸 필요가 없어짐

 

더 생각해봤습니다~

1. 유저 정보는 서버에서 받아오는 Server State (서버 상태) 이기 때문
1. react-query가 탄생하게 된 계기도 이 서버 상태와 클라이언트 상태의 혼동을 방지하기 위함

2. react-query로 받아온 데이터를 굳이 zustand의 전역 상태로 변경할 필요가 없음
Q. 그럼 react-query 안쓰고 받아오면 되지 않나?
A. react-query를 쓰지 않고 일반 비동기 요청을 통해 zustand에 저장할 경우 react-query는 사용 의미가 없어짐

3. 유저 정보를 수정할 경우 비동기 요청(react-query든 일반 api 함수든)으로 가져온 데이터를 다시 zustand에 넣어줘야해서 번거로움 ⇒ react-query는 mutation으로 해결 가능

• 이부분은 캐싱이 필요하냐 안하냐로 갈리는 걸로 알고있습니다