Auth

1. 회원가입 / 로그인 로직을 React Query로 변경한 이유

배경

기존에는 로그인 / 회원가입 로직을 onSubmit으로 직접 관리했고, 폼 제출이 완료되면 페이지('/') 이동 또는 Header 컴포넌트 리렌더링을 통해 로그인된 사용자의 프로필을 바로 볼 수 있도록 하고자 했었음

---

문제점

Header 컴포넌트에서 로그인 상태 변경을 감지하기 위해 useEffect의 의존성 배열에 data를 포함시켜 리렌더링을 하려고 했으나, 다음과 같은 문제가 발생함

1. Header가 리렌더링되기 위해서는 로그인 이후 변경된 data를 계속 내려주어야 했음
2. 따라서 상태 전달 및 의존성 관리가 복잡해졌고, 의존성 배열에서 하나라도 누락될 경우 프로필 정보가 갱신되지 않는 문제가 발생함
3. 위 두가지 문제로 코드가 복잡해짐

---

해결 방법

로그인 / 회원가입 로직을 React Query 기반 구조로 변경함

1) Query Key 기반 상태 구독 React Query의 queryKey를 사용하여 해당 키를 구독하는 컴포넌트(Header)가 최신 유저 데이터로 자동 리렌더링되도록 구성함

useQuery({
  queryKey: user ? ['user', user._id] : ['user'],
  queryFn: fetchUserProfile,
});

위 예시처럼 적용하여 props 전달하는 문제를 없앰

---

2) Mutation과 Query의 역할 분리

회원가입 / 로그인과 같은 사용자 액션은 useMutation으로 처리하고, 유저 정보 조회는 useQuery로 분리함

• Mutation onSuccess, onError를 이용한 성공 / 실패 처리 성공 시 invalidateQueries로 user query 갱신

useMutation({
  mutationFn: signup,
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['user'] });
  },
  onError: () => {
    // 에러 처리
  },
});

• Query 서버 상태 관리 전용 사이드 이펙트는 useEffect에서 처리

const { data, isSuccess, isError } = useQuery({
  queryKey: ['user'],
  queryFn: fetchUserProfile,
});

useEffect(() => {
  if (isSuccess) {
    setUser(data);
  }
}, [isSuccess, data]);

+)React Query v5 변경 사항 관련

기존 useQuery에서는 onSuccess, onError 옵션을 통해 성공 / 실패 시 사이드 이펙트를 처리할 수 있었으나, React Query v5부터 해당 옵션이 제거됨 (문서 스크린샷)

이에 따라: useMutation → onSuccess, onError로 처리 useQuery → useEffect를 통한 사이드 이펙트 처리

참고 문서 Mutation 가이드 https://tanstack.com/query/latest/docs/framework/react/guides/mutations

React Query v5 마이그레이션 (Breaking Changes) https://tanstack.com/query/latest/docs/framework/react/guides/migrating-to-v5#breaking-changes

결과

• 로그인 / 회원가입 이후 Header 프로필 자동 갱신
• 상태 흐름 단순화
• 서버 상태와 UI 로직의 분리