UseEffect 정리를 위한 초보자 가이드: 사용 방법 및 시기.

useEffect를 사용하면 오늘날 React를 마스터하는 데 중요한 개념인 기능적 구성 요소 내에서 부작용을 수행할 수 있습니다.

다음은 효과에 대해 생각해 볼 수 있는 부작용의 몇 가지 예입니다.
  • 데이터를 가져오는 중
  • DOM을 직접 업데이트
  • 타이머.

  • useEffect 정리 기능이란 무엇입니까?



    useEffect 정리 함수는 구성 요소가 마운트 해제되기 전에 메모리 누수를 방지하고 함수에서 원치 않는 동작을 제거할 수 있습니다.

    이에 대한 몇 가지 사용 사례는 다음과 같습니다.
  • 구독 정리
  • 모달 정리
  • 이벤트 리스너 제거
  • 시간 초과 지우기

  • 이제 아래 코드를 살펴보십시오. 이상한 점을 눈치채셨나요?

    import React from "react";
    export default function App() {
      const [count, setCount] = React.useState(0);
    
      React.useEffect(() => {
        setTimeout(() => {
          console.log("effect is running!");
          setCount((count) => count + 1);
        }, 1000);
      });
    
      return (
        <div className="App">
          <h1>You clicked {count} times!</h1>
        </div>
      );
    }
    


    💡 Note - How it keeps counting even though it should only count once!



    부작용은 모든 렌더링에서 실행되는 useEffect에 속한다는 것을 기억하십시오. 즉, 카운트가 변경되면 렌더링이 발생하고 다른 효과가 트리거됩니다.

    이 문제를 어떻게 해결할 수 있습니까?



    부작용이 실행되는 시기를 제어하는 ​​방법에는 여러 가지가 있습니다. 종속성 배열을 허용하는 두 번째 매개변수를 항상 포함해야 합니다.

    이것이 없으면 효과는 렌더링할 때마다 실행되고 상태를 설정하면 효과가 다시 트리거됩니다. 종속성 배열에서 항상 변경되는 값을 지정하는 경우에도 무한 루프가 발생할 수 있습니다. 하나씩 제거하면 어느 것인지 알 수 있습니다. 그러나 사용하는 종속성을 제거하는 것(또는 맹목적으로 []을 지정하는 것)은 일반적으로 잘못된 수정입니다. 대신 문제의 원인을 해결하십시오.

    따라서 문제를 해결하기 위해 매우 쉽고 간단한 useEffect 정리 함수를 작성할 것입니다. 아래와 같이 useEffect에서 함수를 반환합니다.

    useEffect(() => {
            //effect is running
            return () => {
                //clean up the effect
            }
        }, [input])
    
    


    정리는 언제 실행됩니까?



    효과가 함수를 반환하면 React는 정리할 시간이 되면 함수를 실행할 것입니다. 이해하기 어렵다고 걱정하지 마세요. 아래 예를 통해 더 잘 이해할 수 있습니다.

    이전의 카운터 데모를 수정하고 Counter 구성 요소가 마운트 해제될 때 실행되고 타이머를 중지하는 정리 기능을 소개합니다.

    이 예제에서 useEffect 후크는 한 번 실행된 다음 count 변수가 업데이트될 때마다 다시 실행되는 변수에 종속됩니다.

    import React from "react";
    export default function App() {
      const [count, setCount] = React.useState(0);
      const [total, setTotal] = React.useState(0);
      React.useEffect(() => {
        setTimeout(() => {
          console.log("effect is running!");
          setTotal((count) => count * 2);
        }, 1000);
      }, [count]);
    
      return (
        <div className="App">
          <h1>You clicked {count} times!</h1>
          <button onClick={() => setCount((count) => count + 1)}>+</button>
          <p>Total: {total}</p>
        </div>
      );
    }
    
    


    💡 Note - If there are multiple dependencies, they should be included in the useEffect dependency array.



    //clean up the timer at the end of the useEffect hook
    import React from "react";
    export default function App() {
      const [count, setCount] = React.useState(0);
      React.useEffect(() => {
        let timer = setTimeout(() => {
          console.log("effect is running onMount!");
          setCount((count) => count * 2);
        }, 1000);
    
        return () => {
          console.log("component unmounts");
          clearInterval(timer);
        };
      }, []);
    
      return (
        <div className="App">
          <h1>You clicked {count} times!</h1>
          <button onClick={() => setCount((count) => count + 1)}>+</button>
        </div>
      );
    }
    


    useEffect를 사용하면 기본적으로 사물이 동기화됩니다. 효과를 실행하고 한 번만 정리하려면(마운트 및 마운트 해제 시) 빈 배열([])을 두 번째 인수로 전달할 수 있습니다. 이것은 당신의 효과가 props나 state의 어떤 값에도 의존하지 않는다는 것을 React에게 알려주므로 다시 실행할 필요가 없습니다.

    빈 배열([])을 전달하면 효과 내부의 소품과 상태는 항상 초기 값을 갖습니다. 두 번째 인수로 []를 전달하는 것이 친숙한 componentDidMount 및 componentWillUnmount 정신 모델에 더 가깝지만 일반적으로 효과를 너무 자주 다시 실행하지 않도록 하는 더 나은 솔루션이 있습니다. 또한 React는 브라우저가 페인팅될 때까지 useEffect 실행을 연기하므로 추가 작업을 수행하는 것이 문제가 되지 않습니다.

    결론



    읽어주셔서 감사합니다. 연결해 봅시다!

    언제든지 내email newsletter를 구독하고 에서 연결하세요.

    좋은 웹페이지 즐겨찾기