[프론트 엔드 지식] React 기반 통합(43) - Effect Hook

React 기초 통합(43) - Effect Hook

1. Effect Hook 기본 사용법

클래스의 라이프 사이클과 유사한 일부 기능을 완성하기 위해 Effect Hook을 사용합니다.

렌더링, 네트워크 요청 또는 DOM 조작 여부에 관계없이 클래스 구성 요소를 사용할 때 논리와 코드가 함께 혼합됩니다. 예를 들어 카운터 결과를 레이블에 표시하고 싶은 경우 클래스 구성 요소에서 다음과 같이 수명 주기를 통해 구현합니다.

import React, {
    
     PureComponent } from "react";

export class App extends PureComponent {
    
    
  constructor() {
    
    
    super();

    this.state = {
    
    
      counter: 100,
    };
  }

  componentDidMount() {
    
    
    document.title = this.state.counter;
  }

  componentDidUpdate() {
    
    
    document.title = this.state.counter;
  }

  render() {
    
    
    const {
    
     counter } = this.state;
    return (
      <div>
        <h2>计数：{
    
    counter}</h2>
        <button onClick={
    
    (e) => this.setState({
    
     counter: counter + 1 })}>
          +1
        </button>
      </div>
    );
  }
}

export default App;

함수 구성 요소에서 useEffect를 사용하여 인터페이스 렌더링 이외의 작업, 즉 완료를 완료할 수 있습니다 副作用的事情. 이렇게 하면 코드와 논리가 더 명확하고 간결해 보입니다.

import React, {
    
     memo, useEffect, useState } from "react";

export default memo(function App() {
    
    
  const [count, setCount] = useState(200);

  // 完成一些除渲染外，副作用的事情
  useEffect(() => {
    
    
    // 当前传入的回调函数会在组件被渲染完成后，自动执行
    // 网络请求/DOM操作/事件监听
    document.title = count;
  });

  return (
    <div>
      <h2>计数：{
    
    count}</h2>
      <button onClick={
    
    (e) => setCount(count + 1)}>+1</button>
    </div>
  );
});

보시다시피 useEffect의 Hook을 통해 리액트가 렌더링 후 어떤 작업을 수행할지 알 수 있습니다. react가 DOM 업데이트 작업을 실행한 후 useEffect에서 전달한 콜백 함수를 다시 호출합니다. 기본적으로 이 함수는 첫 번째 렌더링이든 각 업데이트 후에 호출됩니다.

2. 클리어가 필요한 효과

클래스 컴포넌트에서는 일반적으로 componentDidMount리스닝 이벤트를 설정하고 componentWillUnmount리스닝 이벤트를 지우고, useEffect를 사용하는 함수 컴포넌트에서는 useEffect의 반환 값(콜백 함수)을 사용하여 이벤트 모니터링의 지우기 작업을 실현할 수 있습니다.

import React, {
    
     memo, useEffect, useState } from "react";

export default memo(function App_clear() {
    
    
  const [count, setCount] = useState(0);

  // 在执行完渲染后，执行副作用事件
  useEffect(() => {
    
    
    // 监听事件
    // const unsubscribe = store.subscribe(() => {});

    // function foo() {}
    // eventBus.on("test", foo);

    // 监听和取消放在一个地方，内聚性高
    console.log("假设监听unsubscribe、eventBus等事件");

    // // 返回值：回调函数 => 组件重新渲染或组件卸载时执行
    return () => {
    
    
      console.log("取消监听unsubscribe、eventBus等事件");
    };
  });

  return (
    <div>
      <button onClick={
    
    (e) => setCount(count + 1)}>+1({
    
    count})</button>
    </div>
  );
});

useEffect에서 반환되는 함수는 선택적인 효과 지우기 메커니즘으로, 모니터링을 설정하고 모니터링을 취소하는 논리를 함께 실현하여 응집력을 향상시킬 수 있습니다.

셋, 여러 효과 사용

useEffect에서 다음 세 가지 작업을 수행한다고 가정합니다.

  // 在执行完渲染后，执行副作用事件
  useEffect(() => {
    
    
    // 1.修改document的title

    // 2.对redux中数据变量的监听

    // 3.监听eventBus中的事件
  });

이벤트의 수가 증가함에 따라 useEffect의 로직이 점차 복잡해짐을 알게 될 것입니다. 이때 여러 효과로 분할하고 순차적으로 실행할 수 있습니다. 즉, react는 여러 useEffect를 지원합니다.

  // 在执行完渲染后，执行副作用事件
  useEffect(() => {
    
    
    // 1.修改document的title
    console.log('1.修改document的title');
  });

  useEffect(() => {
    
    
    // 2.对redux中数据变量的监听
    console.log('2.对redux中数据变量的监听');
  });

  useEffect(() => {
    
    
    // 3.监听eventBus中的事件
    console.log('3.监听eventBus中的事件');
  });

매번 페이지 렌더링을 트리거할 때 세 가지 이벤트가 순서대로 실행되는 것을 볼 수 있습니다.

4. Effect의 실행 메커니즘

버튼을 클릭할 때마다 모니터링 작업이 수행되는 것으로 나타났습니다.효과가 네트워크 요청 이벤트라고 가정하면 각 업데이트 후에 요청이 시작됩니다.이렇게 빈번한 모니터링 및 요청은 우리가 원하는 바가 아닙니다. useEffect의 두 번째 매개변수를 사용하여 실행 메커니즘을 제어할 수 있습니다.

  // 在执行完渲染后，执行副作用事件
  useEffect(() => {
    
    
    // 1.修改document的title
    console.log("1.修改document的title");
  }, [count]);

  useEffect(() => {
    
    
    // 2.对redux中数据变量的监听
    console.log("2.对redux中数据变量的监听");
  }, []);

  useEffect(() => {
    
    
    // 3.监听eventBus中的事件
    console.log("3.监听eventBus中的事件");
  }, []);

빈 배열을 전달한다는 것은 사이드 이펙트 이벤트가 어떤 컨텐츠에도 의존하지 않는다는 것을 의미하며, 이때 componentDidMount의 효과와 일치합니다.

event 1 을 전달한다는 것은 [count]event 1 이 있는 useEffect 가 count 변수에 따라 달라지며 count 변수가 변경되면 실행된다는 의미입니다. 따라서 카운트 값을 수정하기 위해 버튼을 클릭하면 이벤트 1만 반복해서 트리거됩니다.