[LAB-16] useLayoutEffect에서 토큰 검사 후 다른 페이지로 이동 시 useEffect도 수행됨

no-support commented 1 year ago

질문 작성자

노지원

문제 상황

로그인한 사용자가 아니면 navigate("/home")로 메인화면으로 돌려보내는 부분이 있을 때, 렌더링 이전에 수행되어야 할 것 같아서 useLayoutEffect에서 토큰이 있는지 검사해서 토큰이 없으면 메인화면으로 돌려보내도록 해놓고, useEffect에서는 사용자 인증이 완료되었으므로 get api를 호출하는 식으로 구현했더니, 개발자 도구에서 navigate 함수는 useEffect에서 사용하라는 안내 메시지와 함께, useEffect도 수행되어 get 요청한 데이터가 그려집니다. 이런 문제가 생겨서 일단 useEffect 부분에서 토큰 검사 및 navigate, get api를 호출하는 로직 세 개가 다 있게 되었고, 일단 문제는 해결되었습니다.
논리상으로 볼 때 전자의 방식이 옳은 방식 같은데, 왜 위와 같은 일이 발생하는지 알 수 있을까요? 혹시 useLayoutEffect에서 cleanup을 해주지 않아서일까요?(추가로 그럼 useLayoutEffect보다 더 먼저 토큰 검사 및 navigete("/home")을 호출시키기 위해 훅 안이 아니라, 컴포넌트 안 맨 위에서 useNavigate()를 호출하고 바로 토큰 검사를 해도 여전히 /home으로 리다이렉트되지 않습니다)

yamoo9 commented 1 year ago

문제 상황

useNavigate 훅의 navigate 함수를 useLayoutEffect 훅 내부에서 사용하니 useEffect 훅을 사용 하라고 경고합니다.

코드를 첨부하지 않아 직접 테스트 할 수 없습니다.
오류 메시지도 첨부되지 않아 어떤 상황인지 알 수 없습니다.

문제 발생 원인 분석

React Router의 useNavigate 훅 코드를 살펴보면 경고가 발생한 이유를 유추할 수 있습니다.

아래 그림에 표시된 부분에서 확인할 수 있듯이 useNavigate 훅이 반환하는 navigate 함수는 activeRef.current 값이 true가 아닌 경우 warning 함수에 의해 경고가 출력됩니다. 그리고 activeRef.current 값은 useEffect 훅에 의해 값이 true로 변경됩니다.

그러므로 useEffect 훅보다 먼저 실행되는 useLayoutEffect 훅의 이펙트 함수가 작동될 때는 아직 activeRef.current 값이 false이므로 navigate 함수가 실행될 때 경고가 출력되는 것입니다.

아래 코드는 useNavigate 훅 코드 전문입니다. (참고)

export interface NavigateFunction {
  (to: To, options?: NavigateOptions): void;
  (delta: number): void;
}

export interface NavigateOptions {
  replace?: boolean;
  state?: any;
}

export function useNavigate(): NavigateFunction {
  invariant(
    useInRouterContext(),
    // TODO: This error is probably because they somehow have 2 versions of the
    // router loaded. We can help them understand how to avoid that.
    `useNavigate() may be used only in the context of a <Router> component.`
  );

  let { basename, navigator } = React.useContext(NavigationContext);
  let { matches } = React.useContext(RouteContext);
  let { pathname: locationPathname } = useLocation();

  let routePathnamesJson = JSON.stringify(
    matches.map((match) => match.pathnameBase)
  );

  let activeRef = React.useRef(false);
  React.useEffect(() => {
    activeRef.current = true;
  });

  let navigate: NavigateFunction = React.useCallback(
    (to: To | number, options: NavigateOptions = {}) => {
      warning(
        activeRef.current,
        `You should call navigate() in a React.useEffect(), not when ` +
          `your component is first rendered.`
      );

      if (!activeRef.current) return;

      if (typeof to === "number") {
        navigator.go(to);
        return;
      }

      let path = resolveTo(
        to,
        JSON.parse(routePathnamesJson),
        locationPathname
      );

      if (basename !== "/") {
        path.pathname = joinPaths([basename, path.pathname]);
      }

      (!!options.replace ? navigator.replace : navigator.push)(
        path,
        options.state
      );
    },
    [basename, navigator, routePathnamesJson, locationPathname]
  );

  return navigate;
}

no-support commented 1 year ago

activeRef.current값이 false이면 navigate 함수를 return으로 종료시켜버리는군요..!😮 감사합니다!!!🤩

yamoo9 / likelion-FEQA