더북(TheBook)

hooks/useLogin.ts

(...)
import {useNavigation} from '@react-navigation/core';
import {useUserState} from '../contexts/UserContext';
import {RootStackNavigationProp} from '../screens/types';

export default function useLogin() {
  const [, setUser] = useUserState();
  const navigation = useNavigation<RootStackNavigationProp>();
  const mutation = useMutation(login, {
    onSuccess: (data) => {
      setUser(data.user);
      navigation.pop();
      /* TODO: 인증 토큰 적용 예정 */
    },
    onError: (error: AuthError) => {
      console.log(error);
      /* TODO: 구현 예정 */
    },
  });
  return mutation;
}

useUserState를 사용한 부분을 보면 const [, setUser] = useUserState()와 같은 형태로 구조 분해를 하는 배열의 첫 번째 원소 이름을 공란으로 남겨놨는데, 이는 구조 분해의 반환값 무시 문법입니다. 만약 const [user, setUser] = useUserState() 형태로 작성하면 user 값이 사용되지 않기 때문에 user 부분에 사용하지 않는 값이라면서 경고줄이 나타납니다. 이 경고를 방지하기 위해 이렇게 반환값 무시 문법을 사용했습니다.

로그인이 성공하면 setUser로 Context에 사용자 정보를 담은 뒤 현재 화면을 종료하도록 만들어줬습니다. 이제, 로그인 또는 회원가입을 시도해보세요. 성공했을 때 화면이 잘 닫히나요?

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.