UseEffect란?

useEffect는 함수 컴포넌트에서 side effects(부수 효과)를 수행할 수 있게 해주는 Hook입니다.
이를 통해 컴포넌트의 렌더링 이후에 실행되는 작업을 수행할 수 있습니다.

useEffect는 컴포넌트가 렌더링될 때마다 실행되며, 기본적으로 렌더링이 완료된 후에 작업을 수행합니다.
또한, useEffect 내에서 반환된 함수는 해당 컴포넌트가 소멸될 때 실행됩니다.

---

useEffect 예시 :

useEffect(() => {
    console.log("랜더링 될때마다 실행");
}); 

useEffect(() => {
    console.log("처음 마운트 될때만 실행");
},[]); 

useEffect(() => {
    console.log("name State가 변경될때마다 실행")
},[name]); 

---

예를 들어, 컴포넌트가 렌더링될 때마다 페이지 제목을 업데이트하고, 컴포넌트가 제거될 때 정리 작업을 수행하는 예시 코드는 다음과 같습니다:

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

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

  // 컴포넌트가 렌더링된 후에 실행됩니다.
  useEffect(() => {
    document.title = `Count: ${count}`;

    // 이 부분은 컴포넌트가 제거되기 전에 실행됩니다.
    // 즉, 언마운트 될때 return을 실행합니다.
    return () => {
      document.title = 'React App'; // 정리 작업
    };
  }, [count]); // count가 변경될 때만 실행

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default Example;

위 코드에서 useEffect는 컴포넌트가 렌더링된 후에 document.title을 업데이트하고, 해당 컴포넌트가 제거될 때 document.title을 초기 값으로 다시 설정하는 역할을 합니다.

useEffect는 함수 컴포넌트 내부에서 여러 번 사용될 수 있으며, 각각의 useEffect는 독립적으로 작동합니다.
useEffect는 의존성 배열을 통해 특정 상태나 프롭스가 변경될 때만 실행되도록 설정할 수 있습니다.

예를 들어, 위 코드에서는 useEffect가 count에 의존하여 count가 변경될 때마다 실행됩니다.

이 예시 코드를 사용하면 카운터 앱에서 페이지 제목이 카운터 값과 동기화됩니다.