[JS] 클로저

2024-10-22 1 분 소요

💭 예상 질문

클로저란 상위 스코프의 식별자를 참조하며, 외부 함수보다 더 오래 유지되는 중첩 함수를 말합니다.

함수 정의가 평가되어 함수 객체를 생성하는 시점에 실행 중인 실행 컨텍스트의 렉시컬 환경을 상위 스코프로 참조합니다.

클로저는 외부 함수보다 생명주기가 길기 때문에 메모리 누수에 주의해야 합니다.

리액트의 useState도 클로저로 구현되어 컴포넌트가 다시 호출되어도 이전 상태 값을 기억합니다.

자바스크립트는 렉시컬 스코프를 따르기 때문에 함수가 어디서 정의됐는지에 따라 상위 스코프를 결정한다.

함수 정의가 평가되어 함수 객체를 생성하는 시점인 실행 중인 실행 컨텍스트의 렉시컬 환경 을 상위 스코프로 참조한다.

이에 함수는 함수 객체의 내부 슬롯인 [[Environment]] 에 상위 스코프 참조를 저장한다.

따라서 함수는 언제나 상위 스코프의 식별자를 참조 할 수 있으며, 식별자에 바인딩된 값을 변경 할 수 있다.

클로저를 반환하는 외부 함수는 콜스택에서 제거되지만 클로저의 [[Environment]] 에서 참조하고 있기 때문에 렉시컬 환경은 유지된다. 클로저를 활용하면 캡슐화와 정보은닉 효과를 얻을 수 있다.

당연하게 사용하고 있었지만 일반 함수 내의 변수였다면 재선언되어 초기값으로 초기화되는 게 자연스럽다. 하지만 setState를 실행해 컴포넌트가 재호출되면서 리렌더링되는데도 state 값이 초기화되지 않고 이전 상태 값을 기억한다.

useState로 관리되는 상태는 특정 메모리 공간에 저장되고, 클로저를 통해 해당 상태에 접근한다. 그래서 useState의 상태 값은 리렌더링이 발생해도 초기화되지 않고 유지되는 것이다.