useLifeCycle

Introduction

이 useLifeCycle 훅은 React 함수형 컴포넌트에서 라이프사이클 이벤트에 대응하는 커스텀 훅을 제공하는데 사용됩니다. 주로 컴포넌트의 마운트 및 언마운트 시에 사용자가 지정한 콜백 함수를 실행하여 특정 작업을 수행합니다.

Example

import React from "react";

function ExampleComponent() {
  // 컴포넌트가 마운트될 때 실행될 작업
  const onMount = () => {
    console.log('Component is mounted!');
  };

  // 컴포넌트가 언마운트될 때 실행될 작업
  const onUnmount = () => {
    console.log('Component is unmounted!');
  };

  // useLifeCycle 훅을 사용하여 라이프사이클 이벤트에 대응하는 작업 설정
  useLifeCycle(onMount, onUnmount);

  return (
    <div>
      {/* 컴포넌트의 내용 */}
    </div>
  );
}

• 컴포넌트 내에서 특정 초기화 작업이나 리소스 해제 작업을 수행하고자 할 때 사용할 수 있습니다.

• 예를 들어, 컴포넌트가 마운트될 때 API 요청을 보내거나, 언마운트될 때 리소스를 정리하는 등의 작업을 수행할 수 있습니다.

Hook

import { useEffect } from "react";

type LifecycleCallback = () => void;

/**
 * 컴포넌트 라이프사이클 이벤트에 대응하는 커스텀 훅입니다.
 * @param {LifecycleCallback} mount 컴포넌트가 마운트될 때 실행되는 콜백 함수
 * @param {LifecycleCallback} unmount 컴포넌트가 언마운트될 때 실행되는 콜백 함수
 */
export default function useLifeCycle(mount?: LifecycleCallback, unmount?: LifecycleCallback): void {
  useEffect(() => {
    /**
     * @event mount 컴포넌트가 마운트될 때 실행되는 부분
     */
    if (mount) {
      mount();
    }

    /**
     * @event unmount 컴포넌트가 unmount시에 실행될 부분
     */
    return () => {
      if (unmount) {
        unmount();
      }
    };
  }, []); // 빈 배열 : 컴포넌트가 마운트될 때 한 번만 실행됨을 보장하도록 합니다.
}

이 코드의 핵심은 useEffect 훅을 사용하여 컴포넌트 라이프사이클에 대응하는 작업을 수행하고, 두 가지 콜백 함수(mount 및 unmount)를 통해 사용자가 원하는 동작을 정의할 수 있도록 하는 것입니다.