웹사이트 검색

useEffect, useLayoutEffect 및 useEffectEvent: React의 데이터 가져오기 후크 비교

React의 데이터 가져오기 후크(useEffect, useLayoutEffect 및 useEffectEvent)를 살펴보고 효율적인 앱 개발을 위한 기능을 비교해보세요.

React 후크는 React 구성 요소의 부작용을 관리하는 강력한 방법입니다. 부작용을 처리하기 위한 가장 일반적인 후크 세 가지는 useEffect, useLayoutEffect 및 useEffectEvent입니다. 각 후크에는 고유한 사용 사례가 있으므로 작업에 적합한 것을 선택하는 것이 중요합니다.

useEffect 후크

useEffect 후크는 기능적 구성 요소에서 DOM 조작, 비동기 작업 및 데이터 가져오기와 같은 부작용을 수행할 수 있게 해주는 React의 기본 후크입니다. 이 후크는 효과 함수와 종속성 배열이라는 두 개의 인수를 취하는 함수입니다.

효과 함수에는 부작용을 수행하는 코드가 포함되어 있으며 종속성 배열은 효과 함수가 실행되는 시기를 결정합니다. 종속성 배열이 비어 있으면 효과 함수는 구성 요소의 초기 렌더링 시 한 번만 실행됩니다. 그렇지 않으면 종속성 배열의 값이 변경될 때마다 효과 함수가 실행됩니다.

다음은 useEffect 후크를 사용하여 데이터를 가져오는 방법의 예입니다.

import React from "react";
function App() {
  const [data, setData] = React.useState([]);
  React.useEffect(() => {
    fetch("<https://jsonplaceholder.typicode.com/posts>")
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []);
  return (
    <div className="app">
      {data.map((item) => (
        <div key={item.id}>{item.title}</div>
      ))}
    </div>
  );
}
export default App;

이 코드는 useEffect 후크를 사용하여 외부 API에서 데이터를 가져오는 앱 구성요소를 보여줍니다. useEffect의 효과 함수는 JSONPlaceholder API에서 샘플 데이터를 가져옵니다. 그런 다음 JSON 응답을 구문 분석하고 검색된 데이터를 data 상태로 설정합니다.

데이터 상태를 사용하면 앱 구성요소가 상태에 있는 각 항목의 title 속성을 렌더링합니다.

useEffect Hook의 특징

  • 비동기 친화적: 기본적으로 비동기 작업을 지원하므로 데이터 가져오기가 편리합니다.
  • 렌더링 후 실행: useEffect 후크는 애플리케이션이 구성요소를 렌더링한 후 효과를 실행하여 후크가 UI를 차단하지 않도록 합니다.
  • 정리: 함수를 반환하여 정리를 수행하는 통합된 방법을 제공합니다. 이는 리스너나 구독 작업을 할 때 특히 유용할 수 있습니다.

useLayoutEffect 후크

useLayoutEffect 후크는 useEffect 후크와 유사하지만 모든 DOM 변형 후에 동기적으로 실행됩니다. 즉, 브라우저가 화면을 그리기 전에 실행되므로 요소 크기 측정, 요소 크기 조정 또는 위치 애니메이션과 같이 DOM 레이아웃 및 스타일에 대한 정밀한 제어가 필요한 작업에 적합합니다.

다음은 useLayoutEffect 후크를 사용하여 버튼 요소의 너비를 변경하는 방법의 예입니다.

import React from "react";
function App() {
  const button = React.useRef();
  React.useLayoutEffect(() => {
    const { width } = button.current.getBoundingClientRect();
    button.current.style.width = `${width + 12}px`;
  }, []);
  return (
    <div className="app">
      <button ref={button}>Click Me</button>
    </div>
  );
}
export default App;

위의 코드 블록은 useLayoutEffect 후크를 사용하여 버튼 요소의 너비를 12픽셀만큼 늘립니다. 이렇게 하면 버튼이 화면에 표시되기 전에 버튼 너비가 늘어납니다.

useLayoutEffect Hook의 특징

  • 동기화: 동기식으로 실행되며 내부 작업이 많은 경우 UI를 차단할 가능성이 있습니다.
  • DOM 읽기/쓰기: 특히 브라우저를 다시 그리기 전에 변경이 필요한 경우 DOM에서 직접 읽고 쓰는 데 가장 적합합니다.

useEffectEvent 후크

useEffectEvent 후크는 useEffect 후크의 종속성 문제를 해결하는 React 후크입니다. useEffect에 익숙하다면 해당 종속성 배열이 까다로울 수 있다는 것을 알 것입니다. 경우에 따라 종속성 배열에 꼭 필요한 값을 더 많이 입력해야 하는 경우도 있습니다.

예를 들어:

import React from "react";
function App() {
  const connect = (url) => {
    // logic for connecting to the url
  };
  const logConnection = (message, loginOptions) => {
    // logic for logging the connection details
  };
  const onConnected = (url, loginOptions) => {
    logConnection(`Connected to ${url}`, loginOptions);
  };
  React.useEffect(() => {
    const device = connect(url);
    device.onConnected(() => {
      onConnected(url);
    });
    return () => {
      device.disconnect();
    };
  }, [url, onConnected]);
  return <div></div>;
}
export default App;

이 코드는 외부 서비스에 대한 연결을 관리하는 App 구성요소를 보여줍니다. connect 함수는 지정된 URL에 연결하고, logConnection 함수는 연결 세부정보를 기록합니다. 마지막으로 onConnected 함수는 logConnection 함수를 호출하여 기기가 연결될 때 성공적인 연결 메시지를 기록합니다.

useEffect 후크는 연결 함수를 호출한 다음 기기가 onConnected 이벤트를 트리거할 때 실행할 onConnected 콜백 함수를 설정합니다. 이 콜백은 연결 메시지를 기록합니다. 구성요소가 마운트 해제될 때 활성화되는 정리 함수를 반환합니다. 이 정리 기능은 장치 연결을 끊는 역할을 합니다.

종속성 배열에는 url 변수와 onConnected 함수가 있습니다. 앱 구성 요소는 모든 렌더링에서 onConnected 함수를 생성합니다. 이로 인해 useEffect 함수가 루프에서 실행되어 앱 구성 요소가 계속해서 다시 렌더링됩니다.

useEffect 루프 문제를 해결하는 방법에는 여러 가지가 있습니다. 그럼에도 불구하고 종속성 배열에 불필요한 값을 추가하지 않고 이를 수행하는 가장 효율적인 방법은 useEffectEvent 후크를 사용하는 것입니다.

import React from "react";
function App() {
  const connect = (url) => {
    // logic for connecting to the URL
  };
  const logConnection = (message, loginOptions) => {
    // logic for logging the connection details
  };
  const onConnected = React.useEffectEvent((url, loginOptions) => {
    logConnection(`Connected to ${url}`, loginOptions);
  });
  React.useEffect(() => {
    const device = connect(url);
    device.onConnected(() => {
      onConnected(url);
    });
    return () => {
      device.disconnect();
    };
  }, [url]);
  return <div></div>;
}
export default App;

onConnected 함수를 useEffectEvent 후크로 래핑하면 useEffectEvent 후크는 이를 useEffect 후크에 전달하기 전에 항상 message 및 loginOptions 매개변수의 최신 값을 읽을 수 있습니다. 이는 useEffect가 onConnected 함수나 이에 전달된 값에 의존할 필요가 없음을 의미합니다.

useEffectEvent 후크는 효과가 useEffect에서 종속성으로 사용하지 않으려는 다른 값이 필요한 이벤트를 트리거하더라도 useEffect가 특정 값에 종속되도록 하려는 경우에 유용합니다.

useEffectEvent Hook의 특징

  • 이벤트 기반 부작용에 가장 적합합니다.
  • useEffectEvent 후크는 onClick, onChange 등과 같은 이벤트 핸들러에서 작동하지 않습니다.

useEffectEvent 후크는 아직 실험적이며 React 버전 18 후크에서는 사용할 수 없습니다.

언제 어떤 후크를 사용해야 할까요?

위의 각 데이터 가져오기 후크는 다양한 상황에 적합합니다.

  • 데이터 가져오는 중: useEffect는 탁월한 선택입니다.
  • 직접 DOM 조작: 다시 그리기 전에 DOM을 동기식으로 변경해야 하는 경우 useLayoutEffect를 선택하세요.
  • 경량 작업: UI를 차단할 위험이 없는 작업의 경우 useEffect를 자유롭게 사용할 수 있습니다.
  • 이벤트 기반 부작용: useEffectEvent 후크를 사용하여 이벤트를 래핑하고 useEffect 후크를 사용하여 부작용을 실행합니다.

부작용을 효율적으로 처리

React 후크는 가능성의 세계를 열어주며, useEffect, useLayoutEffect 및 useEffectEvent 후크 간의 차이점을 이해하면 부작용 및 DOM 조작을 처리하는 방법에 큰 영향을 미칠 수 있습니다. 사용자 친화적인 애플리케이션을 만들려면 이러한 후크의 특정 요구 사항과 의미를 고려하는 것이 중요합니다.

관련기사: