클로저

클로저는 함수 코드와 그 함수가 선언될 때 접근할 수 있던 바깥 바인딩 환경의 묶음이다. 바깥 함수 실행이 끝난 뒤 나중에 호출하도록 전달한 함수가 실행되어도 그 환경의 바인딩에 접근할 수 있게 한다. 바인딩은 이름과 값을 연결하는 자리다.

일반 JavaScript 클로저가 선언 순간의 값을 복사해 고정하는 것은 아니다. 같은 바인딩의 값이 나중에 바뀌면 클로저도 바뀐 값을 읽을 수 있다.

React 함수 컴포넌트는 Render마다 다시 실행되고, 각 실행에는 그 Render만의 props와 상태 바인딩이 있다. 그 안에서 만든 사건 처리 함수, 타이머가 나중에 호출할 함수와 Effect 정리 함수는 자신이 만들어진 Render의 별도 바인딩 환경에 접근한다.

클로저가 이전 값을 읽는 것은 JavaScript 오류가 아니다. “예약한 당시 값”이 필요한지 “실행하는 순간의 최신 값”이 필요한지 먼저 정하고, React Effect의 의존성이나 Effect Event 같은 경계를 그 의도에 맞춰 선택해야 한다.