clean up 함수

개념

• useEffect 내에서 컴포넌트가 언마운트되거나 의존성이 변경될 때 리소스를 정리하는 함수.
• 주로 디바운싱, 이벤트 리스너 제거, 타이머 취소, API 요청 취소 등 불필요한 리소스를 해제하는 데 사용됨.

사용 목적

• 메모리 누수 방지: 리소스가 불필요하게 남아있지 않도록 처리.
• 성능 최적화: 컴포넌트가 사라질 때 불필요한 동작을 방지.
• 부작용 방지: 예기치 않은 결과를 방지.

import { useState, useEffect } from "react";

function SearchComponent() {
  const [query, setQuery] = useState("");
  const [searchResult, setSearchResult] = useState(null);

  useEffect(() => {
    // 디바운싱: 입력 후 500ms 동안 입력이 없으면 API 요청
    const timer = setTimeout(() => {      
      // 실제로는 여기서 API 호출을 진행할 수 있음
    }, 500);

    // clean up: 새로운 입력이 들어오면 기존 타이머를 취소하고 새로 시작
    return () => clearTimeout(timer);
  }, [query]); // query가 변경될 때마다 실행

  return (
    <div>
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="검색어 입력"
      />
      <p>{searchResult}</p>
    </div>
  );
}