React의 useEffect 이해: 0에서 영웅까지

React는 동적 사용자 인터페이스 구축을 위한 가장 인기 있는 JavaScript 라이브러리 중 하나가 되었습니다. React에서 가장 중요한 후크 중 하나는 useEffect입니다. 이를 통해 개발자는 기능적 구성 요소의 부작용을 관리할 수 있습니다. 부작용에는 데이터 가져오기, 구독 설정 또는 DOM 수동 조작과 같은 작업이 포함됩니다. 이번 블로그에서는 useEffect가 무엇인지, 어떻게 작동하는지 자세히 알아보고, 더 나은 이해를 위해 단계별 예시를 제공하겠습니다.

useEffect란 무엇인가요?

React에서 useEffect는 함수 구성 요소에서 부작용을 수행할 수 있는 내장 후크입니다. 이름에서 알 수 있듯이 부작용은 API 호출, 타이머, 로깅 또는 DOM 업데이트와 같이 함수 외부에 영향을 미치는 작업입니다.

React 16.8에 후크가 도입되기 전에는 부작용을 처리하기 위해 컴포넌트DidMount, componentDidUpdate 및 componentWillUnmount와 같은 클래스 구성 요소와 수명 주기 메서드를 사용해야 했습니다. 이제 useEffect를 사용하면 이러한 수명 주기 이벤트가 기능적 구성 요소에 대한 단일 함수로 결합됩니다.

useEffect를 선택하는 이유는 무엇입니까?

useEffect는 여러 가지 이유로 React에서 부작용을 관리하기 위한 강력한 후크입니다.

1. 코드 단순화: 클래스 기반 구성 요소 및 수명 주기 메서드가 필요하지 않으므로 더 깔끔하고 기능 기반 코드를 작성할 수 있습니다.
2. 중앙 집중식 부작용: 데이터 가져오기, DOM 업데이트 등 모든 부작용을 한 곳에서 관리할 수 있습니다.
3. 가독성 향상: 라이프사이클 이벤트 관리 방법을 간소화하여 코드를 더 읽기 쉽고 덜 복잡하게 만듭니다.
4. 유연성: useEffect를 사용하면 효과가 실행되어야 하는 시기를 결정하는 종속성을 정의할 수 있으므로 부작용이 실행되는 시기와 빈도를 더 효과적으로 제어할 수 있습니다.

어떻게 작동하나요?

useEffect 후크는 두 가지 인수를 허용합니다:

1. 효과 함수: 이 함수에는 데이터 가져오기 또는 구독 설정과 같은 부작용 논리가 포함되어 있습니다.
2. 종속성 배열(선택 사항): 효과를 다시 실행해야 하는 시기를 결정하는 값 배열입니다. 종속성 배열의 값이 변경되면 효과가 다시 실행됩니다. 이 배열을 생략하면 매 렌더링 후에 효과가 실행됩니다.

기본 구조는 다음과 같습니다.

useEffect(() => {
  // Side effect logic goes here

  return () => {
    // Optional cleanup function
  };
}, [/* Dependencies go here */]);

예:

import React, { useState, useEffect } from 'react';

function ExampleComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Fetching data when the component mounts
    fetch('https://jsonplaceholder.typicode.com/posts/1')
      .then((response) => response.json())
      .then((json) => setData(json));

    // Optional cleanup (in this case, not needed)
    return () => {
      // Cleanup logic if necessary
    };
  }, []); // Empty array means this effect will only run once when the component mounts

  return 
{data ? data.title : 'Loading...'}
;
}

이 예에서는 구성요소가 처음 렌더링될 때 API에서 데이터를 가져오고 결과가 UI에 표시됩니다. 빈 종속성 배열을 전달하므로 이 효과는 첫 번째 렌더링 후에 한 번만 실행됩니다.

사용 중인 부작용 제어Effect

useEffect가 실행되는 시기를 제어함으로써 성능을 최적화하고 올바른 시간에 부작용이 발생하도록 보장할 수 있습니다.

정리 없는 효과

모든 효과에 정리가 필요한 것은 아닙니다. 정리는 타이머를 지우거나 데이터 스트림 구독을 취소하는 등 효과가 실행된 후 무언가를 제거하거나 재설정해야 하는 경우에만 필요합니다.

예를 들어 정리가 필요하지 않은 시나리오는 다음과 같습니다.

import React, { useState, useEffect } from 'react';

function NoCleanupEffect() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Effect without cleanup runs every time the count changes');
  }, [count]); // Runs every time `count` changes

  return (
    

      
{count}
       setCount(count   1)}>Increment
    
  );
}

이 경우 카운트 상태가 변경될 때마다 효과가 실행됩니다. 구독을 설정하거나 외부 리소스를 관리하지 않으므로 정리가 필요하지 않습니다.

정리 효과

효과에 구독 또는 타이머 설정이 포함된 경우 효과 후에 정리해야 할 가능성이 높습니다. 예를 들어 타이머를 설정하려는 시나리오를 상상해 보세요.

import React, { useState, useEffect } from 'react';

function TimerComponent() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setTime((prevTime) => prevTime   1);
    }, 1000);

    // Cleanup function to clear the timer
    return () => {
      clearInterval(interval);
    };
  }, []); // Empty dependency array: effect runs once, and cleanup occurs when the component unmounts

  return 
{time} seconds have passed
;
}

현재 상황은 다음과 같습니다.

1. setInterval 함수는 매초마다 시간을 증가시키는 타이머를 설정합니다.
2. 정리 함수(useEffect에 의해 반환됨)는 구성 요소가 마운트 해제될 때 간격을 지웁니다. 이렇게 하면 구성 요소가 제거된 후에도 타이머가 계속 실행되지 않습니다.

사용예효과 시나리오

useEffect가 특히 유용한 몇 가지 일반적인 시나리오를 살펴보겠습니다.

구성요소 마운트 시 데이터 가져오기

구성요소가 마운트될 때 데이터를 가져오는 것은 useEffect의 가장 일반적인 사용 사례 중 하나입니다.

useEffect(() => {
  fetchData();

  async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const result = await response.json();
    setData(result);
  }
}, []); // Empty dependency array means it runs once when the component mounts

DOM 업데이트

useEffect를 사용하여 렌더링 후 DOM을 수동으로 조작할 수 있지만 React가 DOM을 효율적으로 관리하므로 이 작업은 드물게 수행해야 합니다.

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]); // Updates the document title whenever `count` changes

구성 요소 마운트 해제 시 정리

정리해야 하는 구독이나 이벤트 리스너와 같은 리소스가 있는 경우 useEffect의 반환 함수를 사용하여 이를 처리할 수 있습니다.

useEffect(() => {
  window.addEventListener('resize', handleResize);

  return () => {
    window.removeEventListener('resize', handleResize);
  };
}, []); // Cleanup listener when the component unmounts

자주 묻는 질문

1. useEffect에서 종속성 배열을 생략하면 어떻게 되나요?

종속성 배열을 생략하면 매 렌더링 후에 useEffect가 실행되므로 API 호출과 같은 비용이 많이 드는 부작용으로 인해 성능 문제가 발생할 수 있습니다.

2. useEffect를 한 번만 실행할 수 있나요?

예, 빈 종속성 배열[]을 전달하면 구성요소가 마운트된 후 효과가 한 번만 실행됩니다.

3. useEffect에서 정리 기능은 무엇인가요?

정리 기능은 구성 요소가 마운트 해제되거나 효과가 다시 실행되기 전에 효과를 실행 취소하는 방법입니다. 타이머, 이벤트 리스너 또는 구독을 정리하는 데 유용합니다.

결론적으로 useEffect는 React에서 부작용 관리를 단순화하는 강력하고 유연한 후크입니다. 부작용이 실행되는 시기를 제어하고 필요할 때 정리함으로써 구성 요소를 최적화하고 불필요한 다시 렌더링이나 메모리 누수를 방지할 수 있습니다. 부작용 관리 기술을 익히려면 위의 예를 실험해보세요!