React Hooks의 useEffect(부작용)

useEffect란 무엇인가요?

useEffect구성 요소를 외부 시스템과 동기화할 수 있는 React Hook입니다.

React에서 이 Hook을 사용하면 useEffect 실제로 React에게 특정 상황에서 정의한 부작용 기능을 실행하라고 지시하는 것입니다. 이 부작용 함수는 데이터 수집, 이벤트 구독, DOM 수동 조작 등과 같이 구성 요소의 렌더링 결과와 관련이 없는 일부 작업을 처리할 수 있습니다.

부작용 함수는 useEffect 의 첫 번째 인수로 전달됩니다. 구성 요소가 업데이트되고 다시 렌더링될 때마다 React는 부작용 기능을 실행해야 하는지 확인합니다. 하지만 Side Effect 함수의 실행 시점을 제어하고 싶다면 종속성 배열인 두 번째 매개변수를 전달하면 됩니다. 종속 배열의 값이 변경되는 경우에만 부작용 기능이 실행됩니다.

종속성 배열을 빈 array: 로 설정하면 []구성 요소가 처음 렌더링될 때만 부작용 기능이 실행됩니다. 이는 초기화를 위한 데이터 가져오기 또는 이벤트 구독과 같이 한 번만 수행하면 되는 부작용 작업에 유용합니다.

 // 挂载时执行，页面创建时只执行一次
  useEffect(() => {
    
    
    console.log("建立游戏连接");
  }, []);

종속성 배열에 다음 값이 포함되어 있으면 [value]구성 요소가 처음 렌더링될 때와 값이 변경될 때 부작용 함수가 실행됩니다. 이는 입력 값을 기반으로 데이터를 쿼리하는 등 특정 값을 기반으로 작업을 수행하는 데 유용합니다.

 // 更新时，当监听的依赖项变动时触发
  useEffect(() => {
    
    
    console.log("当前游戏为：", optionValue);
  }, [optionValue]);

종속성 배열을 전달하지 않으면 구성 요소가 다시 렌더링될 때마다 부작용 함수가 실행됩니다. 이는 실시간으로 데이터를 구독하거나 WebSocket을 통해 데이터를 수신하는 등 실시간 업데이트가 필요한 부작용 작업을 처리하는 데 사용할 수 있습니다.
파괴되면 실행

 // 销毁时
  useEffect(() => {
    
    
    return () => {
    
    
      console.log("已断开连接");
    };
  }, []);

Life Cycle Hook 기능이 주로 실행됩니다 . 각 Hook 기능에서 완전한 기능의 부분적인 효과가 구현됩니다.

함수 기반 실행 : 함수의 모든 효과를 모아서 달성

개발에서 더 일반적으로 사용되는 것은 코드를 통합하여 하나로 묶는 [함수 기반 실행]입니다.

 useEffect(() => {
    
    
    console.log("1 建立游戏连接：", optionValue, num, str);
    return () => {
    
    
      console.log("2 断开游戏连接：", optionValue);
    };
  }, [optionValue, num, str]);

실행 흐름은 다음과 같습니다. 1 마운트: 1 2 업데이트: 21 3 마운트 해제: 2

종속성으로 사용해야 하는 값: Effect에서 사용되는 변수 값, 예: propos/state/Components에서 생성된 변수 등
종속성으로 필요하지 않은 값 : 컴포넌트 외부에서 생성되거나 가져온 변수, 함수 등

일반적으로 useEffect는 부작용을 처리하기 위해 React에서 제공하는 Hook입니다. 주요 기능은 다음과 같이 요약될 수 있습니다.

부작용 함수 정의: 이를 사용하면 useEffect렌더링과 관련되지 않은 작업을 수행하는 부작용 함수를 정의할 수 있습니다. 부작용 함수에는 데이터 가져오기, 이벤트 구독, DOM 수동 조작 등과 같은 임의 코드가 포함될 수 있습니다.
부작용 함수의 실행 타이밍을 제어합니다. useEffect 첫 번째 매개변수는 부작용 함수입니다. 구성 요소의 렌더링이 완료될 때마다 React는 부작용 기능을 실행해야 하는지 확인합니다. 종속성 배열을 useEffect 두 번째 매개변수로 전달하면 부작용 함수가 실행되는 시기를 제어할 수 있습니다.
컴포넌트 마운트 시 부작용 기능 실행: 컴포넌트가 처음 렌더링될 때 부작용 기능이 한 번 실행됩니다. 이는 데이터 가져오기, 이벤트 구독 등과 같은 일부 초기화 작업에 매우 유용합니다.
구성 요소가 업데이트되면 부작용 기능이 다시 실행됩니다. 종속성 배열의 종속성이 변경되면 부작용 기능이 다시 실행됩니다. 이를 통해 특정 값이나 상태를 기반으로 부작용 작업을 업데이트하여 구성 요소와 동기화를 유지할 수 있습니다.
구성 요소 마운트 해제 시 정리 수행: 부작용 함수에서 정리 함수를 반환하면 구성 요소가 마운트 해제될 때 호출됩니다. 이는 구독 취소, 타이머 지우기 또는 기타 필요한 정리 작업을 수행하는 데 사용할 수 있습니다.

를 사용하면 useEffect기능적 구성 요소의 부작용 작업을 처리할 수 있으며 이러한 작업의 실행 타이밍과 정리를 유연하게 제어할 수 있습니다. 이는 구성 요소의 부작용을 관리하는 편리한 방법을 제공하여 코드를 더욱 간결하고 유지 관리하기 쉽게 만듭니다.

종속성을 사용할 때 주의하십시오.사용할 때 useEffect 특정 개발 시나리오에 따라 종속성 설정에 주의해야 합니다. 다음은 몇 가지 일반적인 개발 시나리오와 해당 종속성 고려 사항입니다.

데이터 수집 및 비동기 작업:
- 부작용 함수가 데이터 가져오기를 트리거하기 위해 구성 요소 내부의 상태 또는 속성을 사용해야 하는 경우 관련 상태 또는 속성을 종속성에 포함합니다.
- 데이터 가져오기가 네트워크 요청과 같은 비동기 작업을 통해 수행되는 경우 데이터가 업데이트될 때마다 종속성이 데이터 가져오기를 다시 트리거하지 않도록 해야 합니다. 이전 요청을 취소하는 데 사용할 수 있는 정리 기능입니다 useEffect .
이벤트를 듣거나 구독하세요:
- 부작용 기능이 전역 이벤트를 수신하거나 구독해야 하는 경우 관련 이벤트 또는 구독 소스를 종속성에 포함해야 합니다.
- 정리 함수에서는 메모리 누수를 방지하려면 이벤트 리스너를 취소하거나 구독을 취소해야 합니다.
타사 라이브러리 또는 외부 리소스 사용:
- 부작용 기능이 타사 라이브러리나 외부 리소스(예: 지도, 오디오 등)를 사용하는 경우 문서나 라이브러리에서 제공하는 사용법에 따라 종속성을 설정해야 합니다.
- 정리 기능에서는 리소스 누수나 메모리 오버플로가 발생하지 않도록 리소스 해제 또는 파기 작업이 필요합니다.
구성요소 내부 상태 업데이트:
- 컴포넌트 내부의 상태가 Side Effect 함수에 사용되고, 상태가 업데이트될 때 Side Effect 함수를 다시 실행하려면 이러한 상태를 종속성에 포함시켜야 합니다.
- 클로저 생성의 함정을 피하기 위해 주의를 기울여야 합니다. useCallback 그렇지 않으면 기능 업데이트를 사용하여 올바른 종속성 설정을 보장할 수 있습니다.
성능 최적화:
- 부작용 함수가 어떤 값이나 상태에도 의존하지 않고 그 효과를 무시할 수 있는 경우 불필요한 반복 실행을 피하기 위해 종속성을 생략할 수 있습니다.
- 컴포넌트가 마운트 및 마운트 해제될 때 부작용 기능을 한 번만 실행하면 되는 경우 종속성을 빈 배열로 설정할 수 있습니다 [].

특정 개발 시나리오 및 요구 사항에 따라 어떤 값과 상태가 부작용 기능의 올바른 실행에 중요한 역할을 하는지 신중하게 고려하고 그에 따라 종속성을 설정하여 정확성과 성능을 보장해야 합니다.

React Hooks의 useEffect(부작용)

Supongo que te gusta