[Quiz] 클로저가 무엇인지 설명하고 리액트에서 클로저가 쓰이는 예시를 설명해주세요

[Ssong-Q]

클로저는 쉽게 말해서 실행컨텍스트 A안에 어떤 함수 B가 있다고 가정했을 때, 실행컨텍스트 A의 lexical environment와 내부함수 B의 조합에서 나타나는 특별한 현상을 말합니다.
"컨텍스트 A에서 선언한 변수 c를 참조하는 내부함수 B를 A의 외부로 전달할 경우, 실행 컨텍스트 A가 종료된 이후에도 변수 c가 사라지지 않는 현상" 즉, 클로저를 통해 함수 호출이 종료되더라도 사라지지 않는 지역변수를 만들 수 있다. 클로저를 잘 활용하면 비공개 속성/메소드, 공개 속성/메소드를 구현할 수 있고, 변수들을 캡슐화해서 외부로부터 보호할 수 있다.

리액트 함수형 컴포넌트의 훅에서 클로저가 사용되는 대표적인 예가 바로 useState이다.

function Component() {
  const [state, setState] = useState();

  function handleClick() {
    // useState 호출은 위에서 끝났지만, setState는 계속 내부의 최신값(prev)을 알고 있다.
    // 이는 클로저를 활용했기 때문에 가능하다.
    setState((prev) => prev + 1);
  }

  // ...
}

외부 함수(useState)가 반환한 내부 함수(setState)는 외부 함수(useState)의 호출이 끝났음에도 자신이 선언된 외부 함수가 선언된 환경을 기억하기 때문에 계속해서 state 값을 사용할 수 있는 것.

[Ssong-Q]