클로저

참고한 것들..

https://www.youtube.com/watch?v=WbVVKY9CDP0

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures#클로저closure

클로저 - JavaScript | MDN

 

https://enjoydev.life/blog/javascript/6-closure

JavaScript의 클로저(Closure)란? (feat. React의 useState)

 

https://poiemaweb.com/js-closure

Closure | PoiemaWeb

 

---

참고한 것들을 바탕으로 이해가 잘 안 되는 부분에 대해...

 

• 클로저란

함수와 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합

 

..?뭔소리고

💡

함수 → 반환된 내부함수

함수가 선언됐을 때의 렉시컬 환경 →내부함수가 선언됐을 때의 스코프

즉, 반환된 내부함수가 자신이 선언됐을 때의 환경(Lexical environment)인 스코프를 기억하여 자신이 선언됐을 때의 환경(스코프)밖에서 호출되어도 그 환경(스코프)에 접근할 수 있는 함수

⇒ 클로저는 자신이 생성될 때의 환경(Lexical environment)을 기억하는 함수

 

• 예시 코드1

function outerFunc() {
  let x = 23; // 자유변수

  function innerFunc() { // 자유변수에 엮여있는 함수(=클로저)
    console.log(x);
  }

  innerFunc();
}

outerFunc(); // 23

• 예시 코드2

function outerFunc() {
  let count = 0;

  return function innerFunc() {
    return count++;
  }
}

let counter = outerFunc();

console.log(counter()); // 0
console.log(counter()); // 1
console.log(counter()); // 2

 

 

 

• 클로저를 사용하는 이유 - 상태 유지

function debounce(callback, delay) {
  let timer = null;

  return function () { 
    clearTimeout(timer); 
    timer = setTimeout(() => {
      callback.apply(this, arguments);
    }, delay);
  };
}

• timer는 디바운스가 실행될 함수와 다른 스코프에 있기 때문에 timer에 대한 최신 상태를 유지할 수 있습니다.

 

..?뭔소리고

💡

반환된 함수는 실행될 자신의 스코프를 따로 가집니다.

즉, 반환된 함수는 자신만의 실행 환경(스코프)를 가지지만, 클로저를 통해 debounce의 timer를 계속 참조할 수 있습니다.

 

 

• 클로저와 React의 useState

const React = (function () {
  let state;
  return  {
    useState(initialValue) {
      if(state === undefined) state = initialValue;

      const setState = (newValue) => {
        state = newValue;
      };

      return [state, setState];
    }
  }
})(); // ()() : 즉시 실행 함수 (IIFE)

const Counter = () => {
  const [count, setCount] = React.useState(0);

  console.log(count); // 0
  setCount(1);
  console.log(count); // 1
};

함수형 컴포넌트의 경우 렌더링이 발생하면 함수 자체가 다시 호출됩니다.

따라서 상태를 관리하기 위해서는 함수가 재호출 되었을 때 이전 상태를 기억하고 있어야 합니다.

 

 

• 개념 정리

- 렉시컬 환경

선언 위치에 따라 상위 스코프가 결정되는 것, 선언 당시 환경

 

- 클로저

선언 당시 환경(렉시컬 스코프)을 기억하기 때문에, 생명 주기가 끝난 외부 함수의 변수에 접근 가능한 함수

 

- 클로저 동작 원리

자바스크립트 모든 함수는 렉시컬 스코프에 대한 참조값을 저장하는데, 해당 참조값을 통해 외부 함수의 변수에 접근 가능하게 됩니다.

 

- 클로저 사용 이유

상태 유지, 정보 은닉, 전역 변수 사용 억제

 

- useState와 클로저

리렌더링 되었을 때 이전 상태를 기억하기 위해 클로저의 상태 유지 특성을 사용했습니다.

 

- 클로저의 단점

메모리 누수