230905) useEffect 의 Clean Up 함수

  useEffect(() => {
      window.scrollTo(0, 0);
  }, []);

React를 사용해서 웹사이트를 개발 중인 상황인데, 이전 페이지 스크롤 위치가 다음 컴포넌트 페이지의 스크롤 위치에도 영향을 미쳐 새로운 페이지에 접속했을 때 가장 위부터 볼 수 있는 것이 아니라 이전 페이지에서 있던 스크롤의 위치에 영향을 받아 페이지를 보는 데 불편함이 있었다.

 

따라서 위처럼 useEffect, 의존성배열을 빈배열로 한 상태로 window.scrollTo(0,0)을 주어서 화면이 마운트 됐을 때 스크롤이 최상단에 위치하도록 하였다.

 

하지만 이럴 경우 윈도우 자체의 화면 캡처 기능을 사용하려고 하거나, 현재 있는 사이트의 탭이 아닌 타사이트의 탭을 다녀오는 등 현재 사이트에서 벗어난 작업을 하기만 하면 계속 페이지가 재마운트 돼서 상단으로 올라가게 되는 불편함이 있었다.

 

따라서 useEffect의 Clean up함수를 이용해서 아래와 같이 코드를 수정하였다.

 

  // Clean Up 함수를 이용해 페이지 언마운트 시 스크롤 가장 위로
  useEffect(() => {
    return () => {
      window.scrollTo(0, 0);
    };
  }, []);

clean up 함수는 간단히 말해 return 문을 넣고 그 안에서 무언가 동작을 실행하겠끔 하는 것인데, 이렇게 할 경우 페이지가 언마운트 될 때 return 문 안에 있는 동작을 실행하게 된다. 따라서 A 페이지에서 B페이지로 이동을 할 때 B페이지가 최상단부터 보이게 하고 싶다! 하면 useEffect의 Clean Up함수를 사용한 상태에서 A페이지에서 위와 같은 코드를 추가해 주면 되는 것이다! 그러면 A페이지가 언마운트 되는 순간 페이지를 최상단으로 올리며 B페이지로 이동을 하게 돼서 B페이지는 최상단부터 보이게 된다!!

 

 

---

 

 

오늘도 잘 해냈다!