JavaScript 클로저 설명: 함수가 모든 것을 기억하는 이유

Source: Dev.to

JavaScript 클로저 설명

클로저는 외부 스코프의 변수를 기억하는 함수이며, 외부 함수가 반환된 후에도 그 변수를 유지합니다. 클로저를 이해하면 var 루프 버그, 오래된 React 훅, 메모리 누수와 같은 흔한 문제를 해결할 수 있습니다.

핵심 포인트

• 클로저는 값을 복사하지 않고 참조를 캡처합니다 – 함수는 변수의 스냅샷이 아니라 포인터를 보유합니다.
• 렉시컬 스코프 – 함수가 접근할 수 있는 범위는 호출 위치가 아니라 코드에 작성된 위치에 의해 결정됩니다.
• 루프에서 var와 let – var는 하나의 변수를 공유하고, let은 각 반복마다 새로운 바인딩을 생성합니다.
• React 훅과 오래된 클로저 – 클로저가 이전 상태를 캡처할 수 있습니다. 의존성 배열이나 useRef로 해결합니다.
• 메모이제이션 – 클로저를 사용해 결과를 저장함으로써 성능을 최적화할 수 있습니다.
• 메모리 누수 – 클로저가 참조를 유지하므로 이벤트 리스너와 타이머를 항상 정리해야 합니다.

예시: 카운터

function makeCounter() {
  let count = 0; // 클로저가 이를 살아 있게 유지함
  return function increment() {
    count++;
    return count;
  };
}

const counter = makeCounter();
counter(); // 1
counter(); // 2
counter(); // 3

클로저 덕분에 makeCounter가 반환된 뒤에도 count가 지속됩니다.

React 오래된 클로저 해결 방법

useEffect(() => {
  const id = setInterval(() => fetchResults(query), 2000);
  return () => clearInterval(id);
}, [query]); // 의존성 배열이 최신 상태를 보장함

클로저는 JavaScript 어디에나 존재합니다; 이를 이해하는 것은 예측 가능하고 효율적인 코드를 작성하는 데 필수적입니다.