useEffectOnce

Introduction

useEffectOnce 훅은 주어진 효과(effect)를 컴포넌트가 처음으로 마운트될 때에만 실행하도록 하는 커스텀 훅입니다. 이 훅은 내부적으로 useEffect를 사용하며, 빈 의존성 배열([])을 통해 해당 효과가 한 번만 실행되도록 보장합니다. 이러한 동작은 특정 효과를 컴포넌트의 라이프사이클 중 한 번만 실행하고자 할 때 유용합니다.

Example

import React from 'react';
​
function ExampleComponent() {
  // useEffectOnce 훅을 사용하여 컴포넌트가 처음으로 마운트될 때에만 실행되는 효과 정의
  useEffectOnce(() => {
    console.log('Hello World'); // 이 메시지는 컴포넌트가 처음으로 마운트될 때만 출력됨
  });
​
  return (
    <div>
      {/* 컴포넌트의 나머지 UI */}
    </div>
  );
}
​
export default ExampleComponent;

useEffectOnce 훅을 사용하여 컴포넌트가 처음으로 마운트될 때에만 실행되는 효과를 정의하고 있습니다. useEffectOnce 훅은 내부적으로 useEffect를 호출하며 빈 의존성 배열([])을 전달하여 컴포넌트가 처음으로 렌더링될 때만 해당 효과가 실행되도록 보장합니다.

Hook

import { useEffect } from "react";
import type { EffectCallback } from "react";
​
/**
 * @deprecated - 이 훅은 effect(callback 함수)를 받아 컴포넌트가 처음으로 마운트될 때에만 실행되도록 구현합니다.
 * 내부적으로는 useEffect를 호출하며, 의존성 배열을 빈 배열([])로 지정하여 해당 효과가 컴포넌트가 처음으로 랜더링될 때만 실행되도록 합니다.
 * eslint-disable-next-line react-hooks/exhaustive-deps 주석이 달려 있어, ESLint 규칙 중 exhaustive-deps를 무시하도록 처리되어 있습니다.
 * @param {EffectCallback} effect - 실행할 효과(callback 함수).
 * @example
 * useEffectOnce(() => {
 *   console.log('Hello World');
 * });
 */
export default function useEffectOnce(effect: EffectCallback) {
  useEffect(effect, []);
}

효과 실행 방식: useEffectOnce 훅은 내부에서 useEffect를 호출하며, 의존성 배열을 빈 배열([])로 지정합니다. 이는 해당 효과가 컴포넌트가 처음으로 렌더링될 때만 실행되도록 합니다.