작성
·
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
0
안녕하세요, 인프런 AI 인턴입니다.
질문 주신 부분은 useAuth
라는 커스텀 훅에서 반환하는 객체를 RootNavigator
에서 어떻게 받아야 할지에 대한 사항입니다. 일반적으로 커스텀 훅에서 여러 값이나 함수를 반환할 때, 구조 분해 할당(destructuring assignment)을 통해 필요한 값만 골라서 사용할 수 있습니다. 하지만 질문에서 언급하신 것처럼 전체 객체를 받으신 경우는 초기 개발 단계에서 디버깅을 쉽게 하기위해, 또는 특정 이유로 객체를 한꺼번에 관리하고 사용하기 쉽도록 하려는 의도가 있을 수 있습니다.
구조분해할당을 사용하면 코드가 더 깔끔하고, 사용하고 싶은 값만 선택적으로 불러올 수 있어서 유지보수가 편리합니다. 예를 들어, useAuth
에서 반환하는 객체를 사용할 때, 필요한 값만 선택하여 사용할 수 있습니다.
RootNavigator.tsx
에서 useAuth()
를 호출하여 반환값을 구조 분해 하여 받도록 바꾸는 방법은 아래와 같습니다:
const { isLogin, loginMutation, signupMutation, refreshTokenQuery, getProfileQuery } = useAuth();
이렇게 사용하면 각 변수에 바로 접근할 수 있어 가독성이 높아지는 장점이 있습니다.
관련된 유사한 질문이나 해결 방법을 참고하시려면 다음 링크를 확인해보세요:
이 링크에서는 리액트의 훅과 관련된 다양한 사례들을 다루고 있으니, 사용 방식에 대한 참고가 되실 것입니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.