[React] Clean up 함수

Clean up 함수

다른 페이지에 진입하면 isModalOpen을 false로 업데이트

모든 페이지의 렌더링 시점에 setIsModalOpen(false)를 실행하는 것이다.
처음 이 방법을 생각하고 확실한 방법이다.

다만, 페이지가 추가된다면 잊지 않고 해당 페이지에 setIsModalOpen(false)를 작성해야만 하는 문제가 있다.

모달의 언마운트 시점에 useEffect의 cleanup 함수 활용

공식문서

React의 class 생명주기 메서드에 친숙하다면, useEffect Hook을 componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것으로 생각해도 좋습니다.

즉, useEffect 자체가 함수형 컴포넌트에서도 클래스 컴포넌트의 생명주기 메서드를 사용할 수 있게 해주는 것이다.
따라서 useEffect에도 componentWillUnmount 메서드에 해당하는 기능이 있는데, 이것이 바로 clean-up 함수이다.

clean-up

clean-up 함수는 useEffect Hook 내에서 return되는 함수이다.
컴포넌트가 사라질 때(unmount 시점), 특정 값이 변경되기 직전(deps update 직전)에 실행할 작업을 지정할 수 있다.

  useEffect(() => {
    // mount 시점, deps update 시점에 실행할 작업 (componentDidMount)
    return () => {
      //unmount 시점, deps update 직전에 실행할 작업 (componentWillUnmount)
    };
  }, [deps]);

useEffect

key.

• (마운트)컴포넌트가 렌더링 될 때 작업을 실행한다.

• (업데이트)deps를 통해 특정 값이 변화할때마다 실행할 수도 있다.
  그런데, 하나가 더 있었던 것이다.

• (언마운트)컴포넌트가 사라질 때 작업을 실행한다.

스크랩 글 : https://velog.io/@sjoleee_/useEffect%EC%9D%98-cleanup%ED%95%A8%EC%88%98