React 17 + TypeScript에서 onLoad 이벤트 구현 예제

# React 17 + TypeScript에서 컴포넌트 로드 완료 시점 감지하기

React에서 컴포넌트가 완전히 로드되었을 때(마운트 완료 시) 한 번 실행되는 효과를 구현하는 방법은 여러 가지가 있습니다. 가장 일반적인 방법은 `useEffect` 훅을 사용하는 것입니다.

## 1. 기본적인 컴포넌트 로드 감지 (useEffect)

import React, { useEffect } from 'react';

const ComponentLoadExample: React.FC = () => {
  useEffect(() => {
    // 컴포넌트가 마운트된 후 한 번 실행됩니다.
    console.log('Component loaded!');
    
    // cleanup 함수 (컴포넌트 언마운트 시 실행)
    return () => {
      console.log('Component will unmount!');
    };
  }, []); // 빈 의존성 배열은 마운트/언마운트 시에만 실행됨

  return (
    <div>
      <h2>Component Load Detection</h2>
      <p>This component has loaded.</p>
    </div>
  );
};

export default ComponentLoadExample;

## 2. 클래스 컴포넌트에서의 구현 (componentDidMount)

import React from 'react';

class ClassComponentLoadExample extends React.Component {
  componentDidMount() {
    console.log('Class component loaded!');
  }

  componentWillUnmount() {
    console.log('Class component will unmount!');
  }

  render() {
    return (
      <div>
        <h2>Class Component Load Detection</h2>
        <p>This class component has loaded.</p>
      </div>
    );
  }
}

export default ClassComponentLoadExample;

## 3. 커스텀 훅으로 구현 (재사용 가능한 로직)

import { useEffect } from 'react';

function useOnLoad(callback: () => void) {
  useEffect(() => {
    callback();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []); // 빈 의존성 배열로 마운트 시에만 실행
}

const ComponentWithCustomHook: React.FC = () => {
  useOnLoad(() => {
    console.log('Component loaded with custom hook!');
  });

  return (
    <div>
      <h2>Custom Hook Load Detection</h2>
      <p>This component uses a custom onLoad hook.</p>
    </div>
  );
};

export default ComponentWithCustomHook;

## 4. ref를 사용한 DOM 요소 로드 감지

import React, { useEffect, useRef } from 'react';

const DomElementLoadExample: React.FC = () => {
  const divRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (divRef.current) {
      console.log('DOM element is now in the document!', divRef.current);
      // 여기서 DOM 요소에 대한 추가 작업 수행 가능
    }
  }, []);

  return (
    <div ref={divRef}>
      <h2>DOM Element Load Detection</h2>
      <p>This div element has been loaded into the DOM.</p>
    </div>
  );
};

export default DomElementLoadExample;

## 5. 모든 자식 컴포넌트 로드 완료 감지

import React, { useEffect, useState } from 'react';

const ChildComponent: React.FC<{ onLoad: () => void }> = ({ onLoad }) => {
  useEffect(() => {
    // 시뮬레이션: 데이터 fetching이나 다른 비동기 작업
    const timer = setTimeout(() => {
      onLoad();
    }, 1000);

    return () => clearTimeout(timer);
  }, [onLoad]);

  return <div>Child Component</div>;
};

const ParentComponent: React.FC = () => {
  const [loadedChildren, setLoadedChildren] = useState(0);
  const totalChildren = 3;

  const handleChildLoad = () => {
    setLoadedChildren(prev => prev + 1);
  };

  useEffect(() => {
    if (loadedChildren === totalChildren) {
      console.log('All children components have loaded!');
    }
  }, [loadedChildren]);

  return (
    <div>
      <h2>Children Load Detection</h2>
      <p>Loaded {loadedChildren} of {totalChildren} children</p>
      {[...Array(totalChildren)].map((_, i) => (
        <ChildComponent key={i} onLoad={handleChildLoad} />
      ))}
    </div>
  );
};

export default ParentComponent;

## 6. 이미지와 같은 리소스 로드 완료 감지 (실제 onLoad 이벤트)

import React, { useState, useCallback } from 'react';

const ResourceLoadExample: React.FC = () => {
  const [isLoaded, setIsLoaded] = useState(false);

  const handleLoad = useCallback(() => {
    console.log('Resource has loaded!');
    setIsLoaded(true);
  }, []);

  return (
    <div>
      <h2>Resource Load Detection</h2>
      {!isLoaded && <p>Loading resource...</p>}
      <img
        src="https://example.com/image.jpg"
        alt="Example"
        onLoad={handleLoad}
        onError={() => console.error('Failed to load resource')}
        style={{ display: isLoaded ? 'block' : 'none' }}
      />
    </div>
  );
};

export default ResourceLoadExample;