[React] useEffect : Clean-up, 마운트 / 언마운트

🎈 마운트 / 언마운트

• 마운트 : 컴포넌트가 화면에 나타나는 것
  • 처음 컴포넌트가 렌더될때 컴포넌트가 마운트 됨
    props나 state가 변경되어 render될때는 마운트 되지 않음
• 언마운트 : 화면에서 삭제되는 것

근데 props, state가 변경되면 마운트가 돼서 useEffect가 실행된다는데?

chatGPT에게 물어보았다.

React에서 컴포넌트의 마운트와 언마운트에 대해 이야기할 때, 일반적으로 두 가지 개념을 혼동해서 얘기하는 경우가 많습니다. 이 두 가지 개념은 컴포넌트의 라이프사이클과 useEffect 훅의 동작 방식에 관련이 있습니다. 저는 먼저 컴포넌트의 라이프사이클에 대해 설명하고, 그 다음에 useEffect 훅과의 관계를 설명하겠습니다.

컴포넌트의 라이프사이클:
React 컴포넌트는 여러 단계를 거쳐 생성되고 업데이트되며 제거됩니다. 이러한 단계는 컴포넌트의 생명주기라고도 불리며, 컴포넌트의 상태 변화에 따라 실행되는 특정 메서드가 있습니다. 가장 일반적인 라이프사이클 메서드는 다음과 같습니다:
componentDidMount: 컴포넌트가 최초로 렌더링되고 화면에 마운트된 직후에 호출됩니다.
componentDidUpdate: 컴포넌트가 업데이트되고 다시 렌더링된 직후에 호출됩니다.
componentWillUnmount: 컴포넌트가 언마운트되기 전에 호출됩니다.
따라서, 컴포넌트가 최초로 렌더링될 때에만 componentDidMount가 호출되고, 그 이후로는 componentDidUpdate가 호출됩니다. 즉, componentDidMount는 마운트 시에만 호출되며, componentDidUpdate는 그 이후의 업데이트 시 호출됩니다.

useEffect 훅:
useEffect 훅은 함수형 컴포넌트에서 사이드 이펙트를 수행하기 위해 사용됩니다. 이 훅은 컴포넌트가 렌더링될 때마다 실행되거나, 특정 값들이 변경될 때만 실행되도록 설정할 수 있습니다. useEffect 훅을 사용할 때에는 두 번째 인자로 의존성 배열(deps array)을 전달합니다. 이 배열에 포함된 값들이 변경될 때에만 useEffect의 콜백 함수가 실행됩니다.
예를 들어, useEffect(() => {...}, [prop1, prop2])와 같이 의존성 배열에 prop1과 prop2를 전달하면, prop1과 prop2가 변경될 때마다 useEffect의 콜백 함수가 실행됩니다. 그리고 컴포넌트의 첫 렌더링 시에도 useEffect의 콜백 함수가 실행됩니다.

따라서, useEffect를 사용할 때에는 컴포넌트의 첫 렌더링 시에도 실행되지만, 의존성 배열에 포함된 값들이 변경될 때에도 실행되는 것입니다. 이 때문에, useEffect를 사용하면 props나 state가 변경될 때마다 마운트와 언마운트가 실행된다고 이해할 수 있습니다.

결론적으로, 컴포넌트의 라이프사이클과 useEffect 훅은 서로 다른 개념이지만, useEffect를 사용할 때 의존성 배열에 포함된 값들이 변경될 때마다 콜백 함수가 실행되기 때문에, "props나 state가 변할 때마다 마운트와 언마운트가 실행된다"는 형태로 설명될 수 있습니다.

→ useEffect 를 사용하면 의존성 값이 변경될 때마다 마운트와 언마운트가 실행된다고 볼 수 있는듯 하다

🎈 클린업 함수

useEffect(사이드이펙트함수, 배열)

에서 사이드이펙트함수가 또 다른 함수를 return 하게 할 수 있다

useEffect(() => {
  (컴포넌트가 생길 때 수행 작업);      // 이펙트 함수
  return () => {
      (컴포넌트가 사라질 때 수행 작업); // 클린업 함수
  }
}, [의존성배열])

• 컴포넌트의 언마운트, 업데이트 직전에 실행됨
• 클린업 함수 실행 시점에서는 상태 값이 아직 업데이트 전

🎈 역할

이전 useEffect 에 대한 뒷정리 역할을 한다

🔰 클린업 함수가 주로 하는 작업

• clearInterval, clearTimeout : setInterval, setTimeout 으로 등록한 작업을 clear 하기
• 라이브러리 인스턴스 제거