useUnmount

Introduction

이 useUpdateEffect 훅은 컴포넌트가 unmount시에, 사용하는 것을 목적으로 합니다.

Example

import React from "react";

function ExampleComponent() {
  useUnmount(() => {
    // 컴포넌트가 마운트 해제될 때 실행될 정리 로직
    console.log("컴포넌트가 마운트 해제되었습니다. 정리 로직이 실행되었습니다.");
  });

  return <div>{/* 컴포넌트 렌더링 */}</div>;
}

Hook

import { useEffect, useRef } from "react";

/**
 * 이 훅은 컴포넌트가 언마운트(Unmount)시 clean-up를 할 때, 실행할 콜백 함수를 받습니다.
 * @param {()=>void} func - 언마운트 시 실행될 정리 함수입니다.
 * @see [document](https://taeo.gitbook.io/taeo/taeo-hooks/useunmount)
 * @example
 * // 함수형 컴포넌트에서 사용하는 예제
 * useUnmount(() => {
 *   // 여기에 정리 로직 작성
 * });
 */

export default function useUnmount(func: () => void) {
  // useRef를 사용하여 함수를 저장할 ref 객체 funcRef를 생성합니다.
  const funcRef = useRef(func);

  // funcRef.current에 전달된 함수를 저장합니다.
  funcRef.current = func;

  // useEffect를 사용하여 컴포넌트가 처음 렌더링될 때 실행될 콜백 함수를 등록합니다.
  useEffect(
    // 반환된 함수는 컴포넌트가 언마운트될 때 실행됩니다.
    () => () => {
      // funcRef.current에 저장된 함수를 실행합니다.
      funcRef.current();
    },
    // 두 번째 매개변수로 빈 배열을 전달하여 useEffect가 처음 렌더링될 때만 실행되도록 합니다.
    []
  );
}

useUnmount(func: () => void)

• func라는 하나의 매개변수를 받습니다. 이는 컴포넌트가 마운트 해제될 때 실행할 콜백 함수입니다.

const funcRef = useRef(func);
funcRef.current = func;

• useRef : 함수 저장을 위해 사용합니다. useRef는 렌더링 간에 지속되는 참조(funcRef)를 생성하는 데 사용됩니다. 제공된 함수(func)가 이 참조에 저장됩니다.

useEffect(
  () => () => {
    funcRef.current();
  },
  []
);

• useEffect는 컴포넌트가 마운트 해제될 때 실행할 정리 함수를 등록하는 데 사용됩니다.

• 내부의 화살표 함수(() => funcRef.current())는 컴포넌트가 마운트 해제될 때 저장된 함수(funcRef.current)를 실행합니다.

• 의존성 배열이 비어 있으므로 이 효과는 컴포넌트가 마운트될 때 한 번만 실행됩니다.