useEffect는 컴포넌트가 렌더링된 후 DOM이 업데이트 된 시점에 실행된다. 따라서 DOM요소에 직접 접근하거나 조작하기에 안전하다.

1. 이벤트 리스너:

   • DOM 이벤트 리스너를 추가하거나 제거할 때 주로 사용됩니다.

   javascript
   Copy
   useEffect(() => {
     const handleResize = () => {
   // 윈도우 크기 변경 처리
     };
     window.addEventListener('resize', handleResize);
     return () => window.removeEventListener('resize', handleResize);
   }, []);
   
   

2. DOM 측정:

   • 렌더링 후 DOM 요소의 크기나 위치를 측정할 때 사용할 수 있습니다.

   javascript
   Copy
   useEffect(() => {
     const element = ref.current;
     const rect = element.getBoundingClientRect();
   // rect 정보 활용
   }, []);
   
   

3. 포커스 관리:

   • 특정 input 요소에 자동으로 포커스를 주고 싶을 때 사용할 수 있습니다.

   javascript
   Copy
   useEffect(() => {
     inputRef.current.focus();
   }, []);
   
   

4. 외부 라이브러리 통합:

   • DOM을 조작하는 외부 라이브러리(예: D3.js)를 React와 통합할 때 유용합니다.

5. 조건부 DOM 업데이트:

   • 특정 조건에 따라 DOM을 업데이트해야 할 때 사용할 수 있습니다.

   javascript
   Copy
   useEffect(() => {
     if (condition) {
   // DOM 업데이트 로직
     }
   }, [condition]);
   
   

6. 애니메이션:

   • CSS 애니메이션을 트리거하거나 제어할 때 사용할 수 있습니다.

7. 스크롤 위치 관리:

   • 페이지 로드 시 특정 위치로 스크롤하거나, 스크롤 위치를 저장할 때 사용합니다.

8. 클린업:

   • DOM 조작 후 정리가 필요한 경우, useEffect의 반환 함수를 사용합니다.

useEffect를 사용할 때는 항상 의존성 배열을 적절히 관리하고, 필요한 경우 클린업 함수를 제공하여 메모리 누수를 방지하는 것이 중요합니다.

<aside> ❗ useLayoutEffect vs useEffect

</aside>

• useEffect는 비동기적으로 실행되어 화면 그리기 후 실행될 수 있음.
• useLayoutEffect는 동기적으로 실행되어 화면 그리기 전에 실행됨.
• R3F에서 frameloop="demand" 설정 시 useLayoutEffect가 더 적합할 수 있음.

1. 클린업 함수의 필요성:
   • 메모리 누수 방지
   • 불필요한 동작 중단
   • 리소스 해제
   • 일관성 있는 애플리케이션 상태 유지
2. 주요 사용 사례와 예시: a. 이벤트 리스너 제거:

b. 타이머 정리:

c. 웹소켓 연결 종료:

d. 외부 라이브러리 인스턴스 정리:

e. 비동기 작업 취소:

f. DOM 변경 되돌리기:

```jsx
javascript
Copy
useEffect(() => {
  const handleScroll = () => {
// 스크롤 처리 로직
  };
  window.addEventListener('scroll', handleScroll);
  return () => window.removeEventListener('scroll', handleScroll);
}, []);

```

```jsx
javascript
Copy
useEffect(() => {
  const timer = setInterval(() => {
// 정기적인 작업 수행
  }, 1000);
  return () => clearInterval(timer);
}, []);

```

```jsx
javascript
Copy
useEffect(() => {
  const socket = new WebSocket('ws://example.com');
// 웹소켓 설정 로직
  return () => socket.close();
}, []);

```

```jsx
javascript
Copy
useEffect(() => {
  const chart = new Chart(ctx, config);
  return () => chart.destroy();
}, []);

```

```jsx
javascript
Copy
useEffect(() => {
  let isCancelled = false;
  const fetchData = async () => {
    const result = await api.getData();
    if (!isCancelled) {
// 데이터 처리
    }
  };
  fetchData();
  return () => { isCancelled = true; };
}, []);

```

```jsx
javascript
Copy
useEffect(() => {
  document.body.style.overflow = 'hidden';
  return () => { document.body.style.overflow = ''; };
}, []);

```

3. 클린업 함수가 호출되는 시점:
   • 컴포넌트가 언마운트될 때
   • 의존성이 변경되어 효과가 재실행되기 전
4. 주의사항:
   • 클린업 함수는 동기적으로 실행되어야 합니다.
   • 비동기 작업의 경우, 플래그 변수를 사용하여 안전하게 처리해야 합니다.