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

안녕하세요. Section10 함수형 컴포넌트의 생명주기에서 궁금한 점이 있어 질문 드립니다.

component가 unmount 되는 상황을 만들기 위해 router.push로 페이지를 이동하잖아요?

그런데 router.push로 이동할 때는 return()=>{...}의 내용이 제대로 실행되는데,

주소창에 직접 이동할 주소를 써서 이동했을 때에는 같은 동작이 실행되지 않더라구요.

둘다 현재 컴포넌트가 제거되고 새로운 컴포넌트가 화면에 나타나는 것아닌가요?

다르게 동작하는데 이유가 있는지, 아니면 제가 코드를 잘못 쓴건지 피드백 부탁드립니다. 감사합니다!

• 작성코드

 useEffect(() => {
    console.log('컴포넌트가 마운트됐습니다~');
    return () => {
      alert('컴포넌트가 제거됩니다~');
    };
  }, []);

  useEffect(() => {
    console.log('컴포넌트가 변경됐습니다~');
  });

  const onClickButton = () => {
    setCount((prev) => prev + 1);
  };

  const onClickMove = () => {
    router.push('/');
  };