React에서 이미지 로딩을 다루는 것은 매우 일반적인 요구사항입니다. 이 문제를 해결하기 위해 React는 React.forwardRef() 함수를 제공합니다. React.forwardRef()를 사용하여 컴포넌트에 대한 참조를 전달하면, 부모 컴포넌트에서 자식 컴포넌트의 DOM 요소에 직접 접근할 수 있습니다. 따라서 이미지 로딩과 같은 비동기 작업을 수행하는 컴포넌트를 개발할 때 유용합니다.

코드 예시

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

const ImageComponent = React.forwardRef((props, ref) => {

  const imgRef = useRef(null);

  useEffect(() => {
    if (ref) {
      ref.current = imgRef.current;
    }
  }, [ref]);

  const handleImageLoad = () => {
    // 이미지 로딩이 완료되었을 때 실행되는 처리 로직
    console.log('Image loaded!');
  };

  return (
    <img
      ref={imgRef}
      src={props.src}
      onLoad={handleImageLoad}
    />
  );
});

export default ImageComponent;

위의 코드에서는 React.forwardRef()를 사용하여 ImageComponent 컴포넌트를 만듭니다. ref를 전달하고 이미지 요소에 대한 참조를 저장하기 위해 useRef()를 사용합니다. 이렇게 함으로써 부모 컴포넌트에서 ImageComponent의 DOM 요소에 액세스할 수 있습니다.

handleImageLoad 함수는 이미지 로딩이 완료되었을 때 실행되는 처리 로직을 담당합니다. 이 함수를 onLoad 이벤트 핸들러로 등록하여 이미지 로딩이 완료되었을 때 적절한 동작을 수행할 수 있습니다.

결론

React에서 이미지 로딩을 처리하기 위해 React.forwardRef()를 사용하는 방법에 대해 알아보았습니다. 이를 통해 부모 컴포넌트에서 자식 컴포넌트의 DOM 요소에 직접 접근하여 비동기 작업을 수행할 수 있습니다. 이 기능을 활용하여 React 애플리케이션에서 이미지 로딩과 같은 작업을 효율적으로 처리할 수 있습니다.

참고 자료:

• React 문서 - Refs and the DOM
• React 문서 - Forwarding Refs

#React #이미지로딩