클로저란?

• 함수와 함수가 선언된 어휘적 환경의 조합이다.
• 함수가 속한 렉시컬 스코프를 기억하며, 함수가 렉시컬 스코프 밖에서 실행될 때도 그 스코프에 접근할 수 있게 하는 기능이다.
• 보통 함수는 실행을 마치면 가비지 컬렉터에 의해 메모리 상에서 제거가 된다.
• 하지만 겉을 감싸고 있는 외부 함수가 역할을 다해 제거되더라도, 내부에서 사용되는 함수 혹은 변수들은 지워지지 않고 메모리 상에 그대로 살아있어 계속 접근할 수 있는 현상이 클로저이다.
• 자바스크립트 엔진은 내부 함수가 실질적으로 참조하는 변수를 가비지 컬렉터에 버리지 않고 렉시컬 환경이라는 공간에 남겨두기 때문에 클로저 현상이 가능하다.

React에서의 클로저

• React의 함수형 컴포넌트의 경우에는 매 렌더링마다 함수가 호출되고 실행이 종료되어 메모리에서 제거된다.
• 하지만 상태가 초기화되지 않고 유지되는 이유가 클로저 때문이다.
• React의 useState hook은 React 모듈 내부의 렉시컬 환경에 상태를 저장한다.
• 컴포넌트 함수가 종료되더라도 반환된 setState 함수가 클로저를 통해 그 내부 상태 값을 접근하고 업데이트하기 때문에 렌더링 사이에도 값이 안전하게 유지된다.

오래된 클로저 (Stale Closure)

• 만약 상태가 업데이트되지 않는다면 오래된 클로저를 원인으로 볼 수 있다.
• 함수형 컴포넌트 안에서 생성된 비동기 콜백 함수가 처음 생성된 당시의 렉시컬 환경을 기억하고 있을 수 있다.
• 이럴 때는 useEffect의 의존성 배열에 해당 상태를 추가하거나, setState의 함수형 업데이트 방식을 이용하여 최신 상태를 직접 참조하도록 하여 해결이 가능하다.

최종 정리

클로저란 함수와 함수가 선언된 어휘적 환경의 조합으로, 함수가 속한 렉시컬 스코프를 기억하여 해당 스코프 밖에서 실행되더라도 그 스코프에 접근할 수 있게 하는 기능입니다. 일반적으로 함수는 실행이 끝나면 가비지 컬렉터에 의해 메모리에서 제거되지만, 내부 함수가 참조하는 변수는 렉시컬 환경에 남겨두기 때문에 클로저가 가능합니다. React에서도 이 클로저 개념이 핵심적으로 활용되는데, 함수형 컴포넌트는 매 렌더링마다 실행이 종료되지만 useState가 React 모듈 내부의 렉시컬 환경에 상태를 저장하고, 반환된 setState 함수가 클로저를 통해 그 상태에 접근하기 때문에 값이 유지됩니다. 다만 비동기 콜백이 생성 당시의 렉시컬 환경을 기억하여 최신 상태를 반영하지 못하는 오래된 클로저 문제가 발생할 수 있으며, 이는 useEffect의 의존성 배열 추가나 setState의 함수형 업데이트 방식으로 해결할 수 있습니다.