[react] Closure란?

일단 공식문서에는

“A closure is the combination of a function and the lexical environment within which that function was declared.”
클로저는 함수와 그 함수가 선언됐을 때의 렉시컬 환경(Lexical environment)과의 조합이다.

라고 나와있다. 솔직히 무슨말인지 하나도 모르겠어서 코드를 살펴보니

function outerFunc() {
  var x = 10;
  var innerFunc = function () { console.log(x); };
  innerFunc();
}

outerFunc(); // 10

innerFunc은 outerFunc 내부에서 선언된 함수이다.

이때 innerFunc은 자신을 포함하고 있는 외부함수에서 선언된 x에 접근을 할 수 있다.

스코프는 함수를 호출할 때가 아닌 함수를 선언할 때 결정이 되는데 이를 렉시컬스코핑 이라고 한다.

만약 위의 코드에

var inner = outerFunc();
inner(); // 10

처럼 외부함수를 객체에 할당 후 호출하면 inner은 innerFunc를 반환하고 종료가 된다.

하지만 종료가 된 후에도 outerFunc내부에 있는 x가 검색이 되어서 콘솔이 찍히는데,

내부함수가 외부함수보다 오래 지속이 되어도 외부함수의 지역변수에 접근할 수 있는 함수를 클로저 함수라고한다.

참고 링크