[React] useEffect 개념정리 ✔️

React를 배우면서 가장 어려웠던 개념 중 하나가 useEffect였던 것 같다.

필자는 useEffect가 처음에는 단순히 '컴포넌트가 렌더링될 때 실행되는 함수구나'라고 생각했지만, 실제로 사용해보니 그 이상의 것들이 있다는 것을 알게 되었다.

그래서 필자는 useEffect에 대해 정리하고자한다.

 

---

useEffect란?

useEffect는 React 컴포넌트에서 부수 효과(Side Effects)를 처리하기 위한 Hook이다.

❗️여기서 부수 효과란? ❗️
데이터 페칭, 구독 설정, DOM 수동 조작과 같은 외부 시스템과의 동기화 작업을 의미한다.
클래스 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount를 하나로 통합한 것이라고 볼 수 있다!

 

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

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

  useEffect(() => {
    console.log('컴포넌트가 마운트되었습니다.');
    // API 호출 등의 작업
  }, []);

  return <div>예시 컴포넌트</div>;
}

위 코드에서 useEffect는 컴포넌트가 처음 마운트될 때 한 번만 실행된다. (빈 의존성 배열([])을 전달했기 때문!)

---

useEffect의 기본 구조

useEffect는 두 가지 매개변수를 받는다.

1. 실행할 함수
2. 의존성 배열

의존성 배열은 선택적이며, 이 배열의 값들이 변경될 때마다 효과가 다시 실행!!!!!!

useEffect(() => {
  // 실행할 코드
  return () => {
    // 클린업 함수
  };
}, [dependencies]);

---

의존성 배열의 이해

의존성 배열은 useEffect가 언제 다시 실행되어야 하는지를 결정한다.

배열 내의 값들이 변경될 때마다 useEffect의 콜백 함수가 실행된다고 보면 된다!

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

  useEffect(() => {
    document.title = `현재 카운트: ${count}`;
  }, [count]); // count가 변경될 때마다 실행

  return (
    <button onClick={() => setCount(count + 1)}>
      클릭 횟수: {count}
    </button>
  );
}

---

클린업 함수

클린업 함수는 컴포넌트가 언마운트되거나 의존성이 변경되어 효과가 다시 실행되기 전에 실행된다.

따라서 메모리 누수를 방지하고 구독을 해제하는 등의 정리 작업에 사용된다.

useEffect(() => {
  const subscription = someAPI.subscribe();
  
  return () => {
    subscription.unsubscribe(); // 클린업 함수
  };
}, []);

---

❗️❗️❗️주의사항❗️❗️❗️

1. useEffect의 무한 루프를 방지하기 위해 의존성 배열을 올바르게 설정해야한다!
2. 불필요한 리렌더링을 막기 위해 useCallback, useMemo 등의 Hook과 함께 사용하는 것이 좋다!