[TIL] Closure

클로저(Closure)

함수가 속한 Lexical Scope를 기억하여, 함수가 Lexical Scope 밖에서 실행될 때에도 이 스코프에 접근할 수 있게 해주는 기능.

자바스크립트의 스코프 정의(Scope Definition)와 실행 컨텍스트(Execution Context)는 함수 안에서 선언된 변수를 함수 바깥에서 접근할 수 없도록 제한한다.

function getAdd() {
  let num = 0;
  return function () {
    num += 1;
    return num;
  };
}

const add = getAdd();
console.log(add());

위 예시코드의 getAdd() 함수에서 정의한 num 변수를 함수 바깥에서 접근하면, 해당 변수가 정의되지 않았다는 에러가 발생한다.

그러나 '함수 안에 선언된 함수'라면, num에 접근할 수 있다. 즉, 위 예시의 익명함수와 같이 부모 스코프의 num 변수를 조작할 수 있는 것.

내부 함수는 부모 함수가 이미 호출이 완료되어 리턴되었을 경우에도 부모 함수 스코프의 변수에 접근이 가능하다.
즉, 이미 실행 컨텍스트 큐에서 부모 함수 컨텍스트 정보는 모두 사라졌음에도 자식 함수가 아직 남아 있다면, 그 자식 함수에서는 이미 실행이 종료된 부모 함수의 컨텍스트 정보(선언된 변수나 함수 등의 정보)를 참조할 수 있다.

const add = getAdd(); 의 실행이 완료되는 시점에 getAdd()의 실행 역시 완료되지만, add에 남아있는 익명함수는 여전히 부모 함수(getAdd)의 num정보를 가지고 있기 때문에 add안에 있는 익명 함수를 호출하였을 때 변수 num을 업데이트하고 리턴해 줄 수 있는 것.

React와 클로저

React의 함수형 컴포넌트에서 상태관리를 하기 위해서는 함수가 재호출되었을 때 이전의 상태를 기억하고 있어야 하며, React Hooks의 경우(대표적으로 usState) 클로저를 통해 이를 해결한다.

const customUseState = (initialVal) => {

  let innerState = initialVal;
  const state = () => innerState;
  const setState = (newVal) => {
    innerState = newVal;
  };
  
  return [state, setState];
};

useState함수를 실행하면 파라미터로 넘어온 initialVal을 내부 상태에 할당하고, state를 호출하면 이 내부 state를 리턴하고, setState를 호출하면 새로운 파라미터로 넘어온 newVal을 내부 상태에 할당한다.

실제로 state과 setState를 사용하는 시점은 customUseState의 호출이 끝난 후이지만, 클로저가 innerState값을 기억하고 있기 때문에 그 이후에도 접근할 수 있는 것