인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

gga01075님의 프로필 이미지
gga01075

작성한 질문수

맛집 지도앱 만들기 (React Native + NestJS)

[3-8] React Query 도입(2) - 로그인 연동하기

useAuth

작성

·

76

·

수정됨

0

22:41 타임을 보시면
src/hooks/queries/useAuth.ts파일에서 리액트 쿼리를 이용하여 선언한 것을 useAuth라는 함수로 만들어서 반환해주고 있는데요

function useAuth() {
  const signupMutation = useSignup();
  const refreshTokenQuery = useGetRefreshToken();
  const getProfileQuery = useGetProfile({
    enabled: refreshTokenQuery.isSuccess, // true일떄 쿼리가 실행
  });
  const isLogin = refreshTokenQuery.isSuccess;
  const loginMutation = useLogin();

  return {
    signupMutation,
    refreshTokenQuery,
    getProfileQuery,
    isLogin,
    loginMutation,
  };
}

src/navigations/root/RootNavigator.tsx 파일에서 위의 함수를 호출할때

 const isLogin = useAuth();

로 반환받고있습니다. 구조분해할당이 아니라 객체 그 자체로 받는 이유가 있을까요?

답변 2

1

Kyo님의 프로필 이미지
Kyo
지식공유자

영상보시면 조금뒤에 바로 수정합니다! {isLogin} 이 맞습니다.

0

안녕하세요, 인프런 AI 인턴입니다.

질문 주신 부분은 useAuth라는 커스텀 훅에서 반환하는 객체를 RootNavigator에서 어떻게 받아야 할지에 대한 사항입니다. 일반적으로 커스텀 훅에서 여러 값이나 함수를 반환할 때, 구조 분해 할당(destructuring assignment)을 통해 필요한 값만 골라서 사용할 수 있습니다. 하지만 질문에서 언급하신 것처럼 전체 객체를 받으신 경우는 초기 개발 단계에서 디버깅을 쉽게 하기위해, 또는 특정 이유로 객체를 한꺼번에 관리하고 사용하기 쉽도록 하려는 의도가 있을 수 있습니다.

구조분해할당을 사용하면 코드가 더 깔끔하고, 사용하고 싶은 값만 선택적으로 불러올 수 있어서 유지보수가 편리합니다. 예를 들어, useAuth에서 반환하는 객체를 사용할 때, 필요한 값만 선택하여 사용할 수 있습니다.

RootNavigator.tsx에서 useAuth()를 호출하여 반환값을 구조 분해 하여 받도록 바꾸는 방법은 아래와 같습니다:

const { isLogin, loginMutation, signupMutation, refreshTokenQuery, getProfileQuery } = useAuth();

이렇게 사용하면 각 변수에 바로 접근할 수 있어 가독성이 높아지는 장점이 있습니다.

관련된 유사한 질문이나 해결 방법을 참고하시려면 다음 링크를 확인해보세요:

이 링크에서는 리액트의 훅과 관련된 다양한 사례들을 다루고 있으니, 사용 방식에 대한 참고가 되실 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

gga01075님의 프로필 이미지
gga01075

작성한 질문수

질문하기