사용 효과, 사용 레이아웃 효과, 사용 효과 이벤트: React의 데이터 불러오기 훅 비교하기

React Hook은 React 컴포넌트에서 부작용을 관리하는 강력한 방법입니다. 부작용을 처리하는 가장 일반적인 세 가지 후크는 사용효과, 사용 레이아웃 효과, 사용 효과 이벤트입니다. 각 훅에는 고유한 사용 사례가 있으므로 작업에 적합한 훅을 선택하는 것이 중요합니다.

사용효과 훅

React에서 `useEffect` 훅을 사용하면 함수형 컴포넌트 내에서 문서 객체 모델(DOM) 수정, 비동기 작업 완료, 데이터 수집 등 다양한 부수적인 작업을 실행할 수 있습니다. 상기 후크는 유효 함수와 종속성 배열이라는 두 개의 매개변수를 수신하는 함수로 표시됩니다.

효과 함수는 결과를 생성하는 로직을 포함하며, 의존성 배열은 효과 함수가 실행되는 시점을 지정합니다. 종속성 배열이 비어 있으면 이펙트 함수는 컴포넌트의 최초 렌더링 중에만 실행됩니다. 그러나 종속성 배열이 요소로 구성된 경우 종속성 배열 내의 값이 변경될 때마다 이펙트 함수가 실행됩니다.

다음 그림에서 볼 수 있듯이 “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;
 

제공된 코드는 외부 API에서 데이터를 검색하기 위해 유틸리티 함수 `useEffect`를 활용하는 애플리케이션 구성 요소의 기능 구현을 보여줍니다. 이 함수의 결과는 JSONPlaceholder API에서 표본 정보를 가져오는 것입니다. 그 후, 수신된 JSON 응답을 처리하고 획득한 데이터를 상태의 ‘데이터’ 속성에 할당합니다.

애플리케이션 컴포넌트는 현재 데이터 상태를 고려하여 해당 상태 내의 각 항목과 연관된 각 제목을 표시합니다.

사용 효과 훅의 특성

시스템은 아키텍처에 내재된 비동기 기능으로 설계되어 원활하고 효율적인 데이터 검색을 용이하게 합니다.

React 컴포넌트에서 `useEffect` 훅의 활용은 렌더링 프로세스 이후에 실행되므로 렌더링 단계에서 해당 훅의 실행으로 인한 사용자 인터페이스의 잠재적 차단을 방지할 수 있습니다.

‘Cleanup’의 유용성은 함수 제공을 통해 정리 작업을 수행하기 위한 포괄적인 접근 방식을 제공할 수 있다는 데 있습니다. 이는 이벤트 리스너 또는 구독을 처리할 때 특히 유용하며, 이러한 요소를 효율적으로 관리하고 제거할 수 있기 때문입니다.

사용 레이아웃 효과 훅

사용 레이아웃 효과` 훅을 사용하면 문서에 적용된 모든 수정 후 동기화된 방식으로 DOM 업데이트 작업이 실행됩니다. 즉, 브라우저가 화면을 닫기 전에 실행되어 요소의 크기 변경, 요소의 크기 조정 또는 위치 애니메이션과 같이 DOM의 위치 및 스타일에 대한 정확한 제어가 필요한 항목에 적합합니다.

제공된 코드 스니펫은 버튼 컴포넌트의 치수를 수정하는 데 사용되는 React의 `useLayoutEffect` 후크 구현을 보여줍니다. 특히, 이 예시에서는 렌더링 프로세스 내에서 버튼 요소의 너비를 변경하기 위해 `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픽셀까지 확장합니다. 또한 이 기민한 구현은 버튼에 대한 시각적 수정이 사용자의 디스플레이 장치에 표시되기 전에 발생하도록 보장합니다.

사용 레이아웃 효과 후크의 특징

앞서 언급한 기능은 사용자 인터페이스와 함께 작동하므로 관련 작업이 리소스 집약적인 경우 잠재적인 지연 및 중단을 초래할 수 있습니다.

DOM 읽기/쓰기는 특히 브라우저의 새로 고침 주기 전에 즉각적인 결과가 필요한 경우 DOM에 대한 직접 읽기 및 쓰기를 수행하는 데 적합합니다.

사용효과 이벤트 훅

React 내에서 `useEffectEvent` 훅을 활용하면 기존의 `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;
 

제공된 코드는 외부 서비스와의 연결을 쉽게 설정하는 앱 구성 요소의 구현을 보여줍니다. 구체적으로, `connect` 함수는 지정된 URL에 연결하는 역할을 하고, `logConnection` 함수는 관련 연결 정보를 기록하는 역할을 합니다. 연결에 성공하면 `onConnected` 함수는 `logConnection` 함수를 호출하여 연결에 성공했음을 알리는 알림을 기록합니다.

`useEffect` 훅을 활용하여 `connect` 함수를 호출한 후 `onConnected` 이벤트 발생 시 수행될 `onConnected` 콜백 함수를 설정합니다. 이 콜백 함수는 성공적인 연결을 알리기 위해 로그 작업을 실행합니다. 컴포넌트의 마운트 해제에 대한 응답으로 디커미셔닝 함수를 반환하여 장치 분리를 담당합니다.

종속성 배열은 URL 변수와 `온커넥티드` 함수의 두 요소로 구성됩니다. 앱` 컴포넌트의 각 렌더링 주기 동안 `온커넥티드` 함수의 인스턴스를 생성합니다. 결과적으로 `useEffect` 함수가 계속 실행되어 `App` 컴포넌트가 반복적으로 렌더링됩니다.

사용 효과 루프 문제를 해결하는 효과적인 방법 중 하나는 종속성 배열 내에 불필요한 값이 포함되지 않도록 하여 최적화된 솔루션을 보장하는 간소화된 접근 방식을 제공하는 사용 효과 이벤트 훅을 사용하는 것입니다.

 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;
 

`useEffect` 훅을 `useEffectEvent` 기능과 함께 사용하면 `message` 및 `loginOptions` 매개 변수의 가장 최근 값에 지속적으로 액세스할 수 있습니다. 따라서 이 접근 방식은 `onConnected` 함수 또는 제공된 매개 변수에 대한 의존성을 제거합니다.

`useEffect` 훅을 사용할 때, 효과에 의해 트리거된 관련 이벤트에 `useEffect` 내에 종속성으로 통합하지 않는 것이 좋을 수 있는 추가 값이 필요함에도 불구하고 특정 값에 대한 종속성을 설정하는 것이 유리할 수 있습니다.

사용효과 이벤트 훅의 특징

이 프레임워크는 이벤트에 의해 트리거된 결과를 처리하는 데 탁월합니다.

`useEffect` 훅의 활용은 `onClick`, `onChange` 등과 같은 이벤트 처리 메커니즘을 지원하지 않습니다.

`useEffectEvent` 훅의 활용은 React의 최신 훅 라이브러리에서 실험적인 기능으로 도입되었지만, 현재 React 버전 18 훅의 구현에서는 사용할 수 없습니다.

언제 어떤 Hook을 사용해야 할까요?

앞서 언급한 데이터 검색 후크는 특정 시나리오에 맞게 조정되어 다양한 요구와 애플리케이션을 충족합니다.

React에서 `useEffect` 훅을 활용하면 외부 소스에서 데이터를 가져오는 편리하고 효율적인 수단을 제공하므로 이러한 목적에 이상적인 선택입니다.

후속 작업을 실행하기 전에 페인팅을 수행해야 하는 방식으로 문서 객체 모델(DOM)을 즉시 변경하려면 `useLayoutEffect`를 사용하는 것이 좋습니다.

사용자 인터페이스를 방해하지 않는 비침입적 작업에 `useEffect` 훅을 활용하는 것은 실행 가능한 옵션입니다.

이벤트 기반 부수 효과의 활용은 이벤트를 캡슐화하기 위한 `useEffectEvent` 훅과 해당 이벤트와 관련된 원하는 부수 효과를 실행하기 위한 `useEffect` 훅을 모두 사용함으로써 달성할 수 있습니다.

부작용을 효율적으로 처리하기

React 훅이 제공하는 기능을 활용하면 광범위한 잠재력을 발견할 수 있으며, useEffect, useLayoutEffect, useEffectEvent 훅 간의 차이를 이해하면 부작용을 관리하고 문서 객체 모델(DOM)을 수정하는 방식에 상당한 영향을 미칠 수 있습니다. 직관적인 소프트웨어 경험을 제작하려면 개별 전제 조건과 그 결과를 인식하는 것이 중요합니다.