24.09.22

🥹 할일 리스트를 쓰는 것 ≠ 실제로 그 일을 하는 것

• ☑️ useQuery vs useEffect 코드 비교
• useQuery 공부

---

useQuery는 React Query의 핵심 훅으로, 서버에서 데이터를 페칭하고 캐싱, 에러 처리 및 로딩 상태를 관리합니다. 이 훅은 비동기적으로 서버에서 데이터를 가져오며, 컴포넌트의 생명 주기와 연결되어 데이터를 자동으로 리페칭하거나 캐싱된 데이터를 재사용할 수 있게 해줍니다.

useQuery의 주요 문법과 사용 방식:
1. 기본 사용법: useQuery(queryKey, queryFn, options)
queryKey: 쿼리를 고유하게 식별하는 키입니다. 쿼리 캐시에서 이 키를 기반으로 데이터를 관리하고 식별합니다.
queryFn: 데이터를 페칭하는 함수입니다. 이 함수는 주로 서버나 API로부터 데이터를 가져오는 비동기 함수입니다.
options: 쿼리 실행을 제어하는 다양한 설정이 포함됩니다. (예: 로딩 중인 상태, 에러 처리, 성공 시 실행할 콜백 등)
2. data, error, isLoading
useQuery는 다음과 같은 상태 값을 반환합니다:

data: 쿼리가 성공적으로 실행되었을 때 가져온 데이터를 반환합니다.
error: 쿼리가 실패했을 때 발생한 에러 객체를 반환합니다.
isLoading: 데이터가 로딩 중일 때 true를 반환하고, 데이터 로드가 완료되면 false가 됩니다.
예시를 바탕으로 설명:
유저 데이터를 가져오는 커스텀 훅 (useUserData) 예시:

const {
  data: user, // 서버에서 가져온 유저 데이터를 user 변수에 저장
  error: userError, // 유저 데이터를 가져오는 중 에러가 발생했을 때의 에러 메시지
  isLoading: userLoading // 데이터가 로딩 중일 때 true, 로딩 완료 시 false
} = useQuery('user', fetchUserAuth, { // 'user'라는 키로 쿼리를 관리하며, fetchUserAuth 함수를 통해 데이터를 페치
  onSuccess: (user) => {
    if (user) {
      setUserId(user.id); // 쿼리 성공 시 전역 상태로 userId를 저장
      setEmail(user.email ?? null); // 쿼리 성공 시 이메일 저장
    }
  }
});

설명:
'user': 쿼리의 고유 키입니다. useQuery는 이 키를 기반으로 캐시된 데이터를 식별합니다. 만약 'user'라는 키로 다른 곳에서 쿼리를 실행하면 캐싱된 데이터를 사용하거나, 필요한 경우 서버에 다시 요청합니다.

fetchUserAuth: 유저 데이터를 가져오는 비동기 함수입니다. supabase.auth.getUser를 호출하여 인증된 유저 데이터를 서버에서 가져옵니다.

onSuccess 옵션:

성공 시 호출되는 콜백 함수입니다. 쿼리가 성공적으로 완료된 후, 데이터를 이용해 setUserId와 setEmail을 호출하여 유저의 ID와 이메일을 전역 상태(Zustand)에 저장합니다.
닉네임을 가져오는 커스텀 훅 (useUserNickname) 예시:

const {
  data: nickname, // 페칭된 닉네임
  error: nicknameError, // 에러가 발생했을 때의 에러 메시지
  isLoading: nicknameLoading // 닉네임 데이터를 로딩 중일 때 true, 로딩 완료 시 false
} = useQuery(['nickname', userId], fetchNickname, {
  enabled: !!userId, // userId가 존재할 때만 쿼리를 실행
  onSuccess: (nickname) => {
    setNickname(nickname ?? ''); // 쿼리가 성공했을 때 닉네임을 전역 상태에 저장
  }
});

설명:
['nickname', userId]: 쿼리 키로 배열을 사용하고 있습니다. 이 배열은 유저의 userId와 연결된 닉네임 데이터를 캐싱하기 위한 고유 식별자 역할을 합니다.

예를 들어, 동일한 키를 사용해 닉네임을 요청하면, 이미 페칭된 데이터가 캐시에서 반환될 수 있습니다.
fetchNickname: 닉네임을 페칭하는 비동기 함수입니다. Supabase의 users 테이블에서 nickname 필드를 가져옵니다.

enabled 옵션:

!!userId: userId가 존재할 때만 쿼리를 실행하도록 합니다. 즉, userId가 null 또는 undefined일 때 쿼리가 실행되지 않도록 제어합니다.
onSuccess 옵션:

쿼리가 성공적으로 완료되면 setNickname을 통해 닉네임을 전역 상태(Zustand)에 저장합니다.
레벨 이름을 가져오는 커스텀 훅 (useUserLevel) 예시:

const {
  data: levelName,
  error: levelNameError,
  isLoading: levelLoading
} = useQuery(['levelName', userId], fetchLevelName, {
  enabled: !!userId, // userId가 있을 때만 쿼리를 실행
  onSuccess: (levelName) => {
    setLevelName(levelName ?? ''); // 성공 시 레벨 이름을 전역 상태에 저장
  }
});

설명:
['levelName', userId]: 쿼리 키로 userId와 연결된 레벨 이름을 캐싱하는 데 사용됩니다.

여러 사용자의 레벨 데이터를 관리할 수 있습니다. 각각의 userId에 대한 캐시가 따로 관리됩니다.
fetchLevelName: 유저의 레벨 이름을 가져오는 비동기 함수입니다.

users 테이블에서 level_id를 가져오고, 이를 기반으로 level 테이블에서 레벨 이름을 조회합니다.
enabled:

userId가 있을 때만 쿼리를 실행하도록 제어합니다. 이를 통해 불필요한 쿼리 실행을 방지합니다.
출석 데이터를 가져오는 커스텀 훅 (useUserAttendance) 예시:

const {
  data: attendance,
  error: attendanceError,
  isLoading: attendanceLoading
} = useQuery(['attendance', userId], fetchAttendance, {
  enabled: !!userId, // userId가 있을 때만 쿼리 실행
  onSuccess: (attendance) => {
    setAttendance(attendance ?? 0); // 성공 시 출석 데이터를 전역 상태에 저장
  }
});

설명:
['attendance', userId]: 쿼리 키로 유저의 출석 데이터를 캐싱하고 관리합니다. userId가 다르면 각각의 캐시가 별도로 관리됩니다.

fetchAttendance: users 테이블에서 attendance 데이터를 가져오는 비동기 함수입니다.

enabled:

userId가 있는 경우에만 쿼리를 실행하도록 제어하여 효율적인 쿼리 실행을 보장합니다.
onSuccess:

출석 데이터를 성공적으로 가져왔을 때 전역 상태에 출석 횟수를 저장합니다.
결론:
useQuery는 서버에서 데이터를 비동기적으로 가져오고, 캐싱, 로딩 및 에러 상태 관리, 성공 시 후처리를 할 수 있는 매우 강력한 도구입니다. 위 코드에서 useQuery는 각종 유저 데이터(닉네임, 레벨, 출석 횟수 등)를 가져와 캐싱하고, zustand를 통해 전역 상태에 데이터를 저장하는 흐름을 간결하게 처리합니다.

아니 근데 위 코드 에러난다고요ㅠㅠㅠㅠㅠㅠ
1. zustand 사용 ➡️ useQuery로 수정 필요
2. 인자를 3개 받고 있다, overload 매칭이 안 된다 ➡️ useQuery()의 인자가 객체 형태인 부분을 인식하는 데서 생긴 문제이므로
queryKey, queryFn을 명시적으로 써서 수정 필요