profile page redirect 부분 질문

복습을 하다가 의문점이 생겨서 질문드립니다.

이 부분인데요. 이 부분에서 !me 일경우 return null 하는 부분이 제가 생각하기에는 없어도 될 것 같아 지우고 실행을 해봤는데 redirect 되지 않고 JSX return 문이 실행되어 결국 오류가 발생하더라고요.

원래는 mount 하기전에 useEffect가 실행되어 redirect가 되는것을 예상하였으나.. useEffect가 class 컴포넌트에서 componentDidMount 역할을 한다면.. 결국 한번은 무조건 return문이 실행되기때문에 return null 문을 넣어줘서 null을 반환하고 useEffect문이 실행되게끔 해야되는걸까요?

function Profile() {
  const { me } = useSelector((state) => state.user);

  useEffect(() => {
    if (!me?.id) {
      Router.push('/');
    }
  }, [me?.id]);

  if (!me) {
    return null;
  }

  return (
    <>
      <Head>
        <title>My profile | Tweeter</title>
      </Head>
      <AppLayout>
        <NicknameEditForm />
        <FollowList header="Following List" data={me.Followings} />
        <FollowList header="Follower List" data={me.Followers} />
      </AppLayout>
    </>
  );
}

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