Component Will Unmount React에서 Functional Components와 함께 componentWillUnmount를 사용하는 방법

이 문서의 최신 버전: https://robertmarshall.dev/blog/componentwillunmount-functional-components-react


기능적 구성 요소는 클래스 기반 구성 요소보다 훨씬 효율적입니다. 동일한 목표를 달성하기 위해 작성해야 하는 코드도 적습니다.

그러나 기능 구성 요소가 클래스로 변경할 필요 없이 수명 주기 이벤트의 사용을 구현할 수 있는 방법에 대해 머리를 숙일 수 없었습니다.

useEffect 을 통해 모든 것을 관리할 수 있습니다.

API 호출과 componentWillMount에서 발생한 일을 관리하기 위해 과거에 useEffect를 사용했지만 componentWillUnmount는 사용하지 않았습니다. 둘 다 매우 유사하다는 것이 밝혀졌습니다!

useEffect로 componentWillMount를 관리하는 방법

componentWillUnmount를 사용하는 방법을 이해하려면 먼저 구성 요소가 useEffect로 마운트를 관리하는 방법을 살펴봐야 합니다.

import React, { useEffect } from 'react';
const ComponentExample => () => {
   useEffect( () => {
      // Anything in here is fired on component mount.
   }, []);
}

두 번째 인수로 빈 배열을 전달하면 구성 요소 로드 시 실행되도록 useEffect에 지시합니다. 발사되는 유일한 시간입니다.

이를 염두에 두고 componentWillUnmount와 함께 작동하도록 코드를 어떻게 변경할 수 있습니까? 솔루션은 매우 간단합니다.

useEffect로 componentWillUnmount를 관리하는 방법

useEffect 함수 안에 반환 함수를 추가하면 구성 요소가 DOM에서 마운트 해제될 때 트리거됩니다. 다음과 같습니다.

import React, { useEffect } from 'react';
const ComponentExample => () => {
    useEffect(() => {
        return () => {
            // Anything in here is fired on component unmount.
        }
    }, [])
}

두 솔루션 결합

이는 동일한 useEffect 함수 호출에서 componentDidMount 및 componentWillUnmount를 사용할 수 있음을 의미합니다. 두 수명 주기 이벤트를 모두 관리하는 데 필요한 코드의 양을 크게 줄입니다. 이렇게:

import React, { useEffect } from 'react';
const ComponentExample => () => {
    useEffect(() => {
        // Anything in here is fired on component mount.
        return () => {
            // Anything in here is fired on component unmount.
        }
    }, [])
}