[JavaScript] - 클로저(Closure)

클로저(Closure)

• 클로저는 함수와 그 함수가 선언된 렉시컬 환경(Lexical Environment)의 조합
• 함수가 생성될 당시의 외부 변수를 기억하고, 그 함수가 실행될 때에도 해당 변수에 접근할 수 있는 기능

‼️ 클로저 = 함수 + 렉시컬 스코프

 

원리

• 자바스크립트에서는 함수가 생성될 때, 해당 함수는 자신이 선언된 위치의 렉시컬 환경을 기억
• 이를 통해 내부 함수는 외부 함수의 변수에 접근 가능
• 외부 함수의 실행이 종료된 이후에도 내부 함수가 해당 변수에 접근 가능

특징

1. 상태 유지
   • 클로저를 사용하면 함수가 생성될 때의 환경을 기억하여, 호출될 때마다 이전 상태를 유지
   • 상태를 유지해야 하는 다양한 상황에서 유용하게 활용 됨
2. 정보 은닉
   • 클로저를 통해 외부에서 직접 접근할 수 없는 변수를 만들 수 있음
   • 데이터의 캡슐화와 은닉이 가능
   • 이는 객체 지향 프로그래밍의 private 멤버와 유사한 역할
3. 전역 변수 사용 억제
   • 클로저를 활용하면 전역 변수의 사용을 최소화
   • 필요한 변수만을 특정 함수의 스코프 내에서 관리할 수 있어 코드의 모듈성과 유지보수성을 향상
4. 상태 유지 및 관리
   • 클로저를 통해 함수 호출 간에 상태를 유지
5. 모듈 패턴 구현
   • 클로저를 활용하여 모듈화된 코드를 작성 가능

 

클로저 = React의 useState

클로저는 JavaScript 함수 안에 상태를

기억하고 유지

useState는 React 컴포넌트에서 상태를

저장하고 변경

 

✅ 공통점

• 둘 다 상태를 유지하는 메커니즘이라는 점에서 유사
• 이전 값을 기억하고, 함수가 다시 실행되더라도 기억된 값에 접근 가능함

 

❎ 차이점

항목	클로저	useState
환경	JavaScript 전반	React 컴포넌트 내부
상태 갱신 방식	직접 변수에 접근 및 조작	setState 함수를 통해 비동기적으로 업데이트
메모리 관리	수동 (참조 해제 필요)	React 내부에서 자동 관리
용도	함수 내 상태 관리, 정보 은닉 등	UI 상태 관리 중심

 

“React의 상태 관리도 결국 JavaScript의 클로저 기반 사고에서 출발한다”

 

 

🚨 주의 사항

• 클로저는 외부 함수의 변수를 참조하기 때문에, 해당 변수가 메모리에 계속 유지되어 메모리 누수가 발생 가능
  • 이벤트 핸들러에 클로저를 등록하고 제거하지 않으면 참조가 남아 GC(Garbage Collector)가 수거하지 못함.
• 불필요한 클로저의 사용을 지양
• 필요 시에는 참조를 제거하여 메모리를 효율적으로 관리 필요

문제 해결 방법

• 클로저가 더 이상 필요하지 않을 경우, 클로저를 담고 있는 변수에 null을 할당
• 이벤트 리스너를 해제하여 참조를 끊어줌으로써 메모리에서 해제되도록 유도

 

⇒ 클로저는 자바스크립트의 강력한 기능 중 하나로, 이를 적절히 활용하면 코드의 효율성과 모듈성을 높일 수 있음

 

 

 

---

참고

https://ko.javascript.info/closure?utm_source=chatgpt.com

변수의 유효범위와 클로저

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Closures?utm_source=chatgpt.com

클로저 - JavaScript | MDN