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

홍재훈

작성한 질문수

타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게

게시글 댓글 렌더링

19강 게시물 수정 기능 강의 질문입니다

작성

수정됨

export const requireAuth = () => {
  const token = sessionStorage.getItem("access_token");
  if (!token) {
    return redirect("/auth/login");
  }
};

export const fetchPostModify = async ({ params }: LoaderFunctionArgs) => {
  try {
    const auth = requireAuth();
    if (auth) return auth;
    const { data } = await axiosInstance.get(`/posts/${params.id}`);
    return data;
  } catch (e) {
    console.error(e);
  }
};

fetchPostModify에서 requireAuth를 import 해서 reponse를 리턴해주고 있는데 여기서 어떤식으로 auth를 리턴시켜 requireAuth를 통해 redirect가 되는건지 조금 헷갈립니다

react react-router redux-toolkit zustand react.js

답변 2

수코딩

지식공유자

안녕하세요.

fetchPostModify 함수 내부에서 requireAuth() 함수를 호출해서 auth 변수에 할당합니다.

const auth = requireAuth();

만약 auth 변수에 값이 할당되어 있다면 redirect 함수가 할당됩니다.

따라서 if(auth)의 조건을 만족하면 redirect() 함수가 할당되어 있다는 뜻이고

그것을 fetchPostModify에서 반환하면 라우트 전환이 되게 됩니다.

loader에서는 직접 redirect()를 return 해줘야만 라우트 전환이 처리가 되기 때문에

위와 같이 코드를 작성한 것입니다.

이해되셨을까요?

이해가 안되시면 다시 질문해주세요!

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 홍재훈님.

글을 읽어보니, fetchPostModify 함수에서 requireAuth를 사용하면서 redirect 기능이 어떻게 작동하는지 궁금하신 것 같습니다.

코드 설명:

requireAuth 함수는 sessionStorage에서 access_token을 가져와 이를 확인하는 방식입니다.
토큰이 없을 경우 redirect("/auth/login")을 호출하여 로그인 페이지로 사용자를 리다이렉트합니다. 여기서 redirect 함수는 보통 React Router v6에서 사용하는 내장 함수로, 해당 경로로 사용자를 이동시킵니다.
fetchPostModify 함수는, 이 requireAuth를 호출하여 사용자가 인증된 상태인지 확인합니다. 만약 인증되지 않은 상태라면, requireAuth에서 반환된 redirect가 경로 이동을 처리하게 됩니다.
requireAuth 함수 내에서 이미 redirect 처리가 되어 있기 때문에, auth 변수를 통해 그 반환값(redirected URL path)이 if (auth) return auth;를 통해 처리됩니다.

추가 설명:

이는 비동기적으로 사용자 인증을 확인하고 인증이 필요한 페이지로 접근 시 로그인 페이지로 유도하는 패턴입니다. redirect 함수는 리액트 라우터의 내장 함수로, 이를 통해 페이지 이동이 가능합니다.

여기와 관련된 추가 정보를 얻고 싶으시면, 다음 링크를 참고해 보세요:

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

홍재훈

작성한 질문수

전체 Q&A

질문하기