1. clean up?

React를 함수형 component로 개발할 때 hook을 사용하게 되는데
그 중 useEffect란 것을 이용해서 mount될 때, unmount될 때, 상태값이 변할 때 effect 효과를 일으키게 만들 수 있다.
clean up은 그 중 unmount될 때 어떤 작용을 할 것인지 정의할 수 있다.

component가 unmount될 때 더 이상 사용되지 않게 정리하는 느낌으로 쓰는거 같다.

2. clean up 사용

React로 웹 작업을 하는데 브라우저 사이즈에 따라 반응형을 구현하는 작업을 하는 중에 자꾸 clean up을 사용하라는 문구가 console에 떴다.
그래서 구글링 하다가 방법을 찾음.

const [windowWidth, setWindowWidth] = useState(window.innerWidth);

useEffect(() => {
  const windowWidth = () => {
    setWindowWidth(window.innerWidth);
  }

  window.addEventListener('resize', windowWidth);
}, []);

위 같은 방법으로 브라우저의 width값을 상태 관리 하고 있었는데 저걸 사용하는 component가 unmount될 때 마다 위에서 말한 메세지가 나옴.

그래서 아래처럼 clean up을 추가하니까 메세지가 안뜸.

useEffect(() => {
  const windowWidth = () => {
    setWindowWidth(window.innerWidth);
  }

  window.addEventListener('resize', windowWidth);

  return () => window.removeEventListener('resize', windowWidth);
}, []);

나중에 또 뜰지 어떨지는 모르겠지만 일단 저 상태에서 메세지가 안뜨니까 좋다.