React.forwardRef()를 사용하여 컴포넌트의 로딩 상태 표시 방법에 대해 알려주세요.

10 Nov 2023

reactjs

React.forwardRef()는 React에서 제공하는 유용한 기능 중 하나입니다. 이 기능을 사용하면 부모 컴포넌트에서 자식 컴포넌트로 ref를 명시적으로 전달할 수 있습니다. 이를 통해 자식 컴포넌트에서 ref를 사용하여 다양한 작업을 수행할 수 있습니다.

로딩 상태 표시는 대개 화면에 로딩 스피너를 표시하여 사용자에게 현재 작업이 진행 중임을 알리는 기능입니다. 이번 예제에서는 React.forwardRef()를 사용하여 로딩 상태를 표시하는 컴포넌트를 구현해보겠습니다.

먼저, 로딩 상태를 표시할 컴포넌트를 만들어 보겠습니다.

import React from 'react';

const LoadingIndicator = React.forwardRef((props, ref) => {
  const { isLoading, children } = props;

  if (isLoading) {
    return (
      <div ref={ref}>
        <span>Loading...</span>
      </div>
    );
  }

  return children;
});

export default LoadingIndicator;

위 코드에서는 isLoading이라는 prop을 사용하여 현재 로딩 상태를 전달받습니다. isLoading이 true인 경우 화면에 “Loading…“이라는 텍스트가 표시되고, false인 경우 자식 컴포넌트를 그대로 렌더링합니다.

이제, 부모 컴포넌트에서 LoadingIndicator 컴포넌트를 사용해보겠습니다.

import React, { useState } from 'react';
import LoadingIndicator from './LoadingIndicator';

const App = () => {
  const [isLoading, setIsLoading] = useState(false);

  const handleClick = () => {
    setIsLoading(true);
    setTimeout(() => {
      setIsLoading(false);
    }, 3000);
  };

  return (
    <div>
      <button onClick={handleClick}>Click Me</button>
      <LoadingIndicator isLoading={isLoading}>
        <div>
          {/* 여기에 로딩 상태가 아닐 때 보여줄 자식 컴포넌트를 작성해주세요 */}
        </div>
      </LoadingIndicator>
    </div>
  );
};

export default App;

위 코드에서는 App 컴포넌트에서 LoadingIndicator 컴포넌트를 사용하고, 클릭 이벤트에 따라 isLoading 상태를 변경하는 예제입니다. 클릭 시 3초 동안 로딩 상태를 표시한 후 isLoading을 다시 false로 설정하여 로딩 표시를 제거합니다.

이제 React.forwardRef()를 사용하여 컴포넌트의 로딩 상태를 표시하는 방법을 알게 되었습니다. 이를 응용하여 다양한 상황에서 로딩 표시를 구현할 수 있습니다.

#React #로딩상태표시