🔒 JavaScript 클로저(Closure) 완전 정리

1️⃣ 클로저란?

**클로저(Closure)**란

함수가 자신이 선언된 렉시컬 스코프의 변수를 참조하면서

그 스코프가 함수 실행 이후에도 유지되는 현상을 말한다.

중요한 포인트는 **“함수 + 선언 당시의 스코프”**다.

2️⃣ 렉시컬 스코프(Lexical Scope)

자바스크립트는 함수가 어디서 선언되었는지를 기준으로

변수 접근 범위를 결정한다.

functionouter() {
const x =10;
 
functioninner() {
console.log(x);
  }
 
inner();
}

inner는 x를 직접 선언하지 않았지만
자신이 **선언된 위치(outer 내부)**를 기준으로 x에 접근 가능

👉 이 규칙이 렉시컬 스코프

3️⃣ 클로저가 성립되는 조건

클로저는 특정 문법이 아니다.

다음 조건을 만족하면 자동으로 성립한다.

✅ 클로저 성립 조건

함수가 중첩되어 있고
내부 함수가 외부 함수의 변수를 참조함

functiona() {
	let x =0;
 
	function b() {
    x++;
		return x;
  }
 
	return b;
}

b는 x를 참조
x는 b의 스코프에 없음
👉 b는 x에 대한 클로저

4️⃣ 클로저와 “상태 유지”

const counter = a();
 
counter();// 1
counter();// 2
counter();// 3

왜 x가 계속 기억될까?

이유는 단 하나

b가 살아 있는 동안 x를 참조하고 있기 때문

a()는 실행이 끝났지만
b를 참조하는 변수가 존재함
JS 엔진은 x를 GC(가비지 컬렉션)하지 않음

👉 클로저는 값을 복사하는 게 아니라, 같은 변수를 참조한다.

5️⃣ 클로저 ≠ 무조건 상태 유지

functiona() {
	let x =0;
 
	functionb() {
    x++;
  }
 
	b();
}
 
a();
a();

이 경우:

a() 실행 후 참조가 남지 않음
x는 매번 새로 생성
👉 상태 유지 ❌

핵심 정리

클로저 성립
+ 외부에서 참조 유지
= 상태 유지

6️⃣ React useState와 클로저의 관계

React의 useState는 클로저 개념 위에서 동작한다.

개념적으로 단순화한 예시

functionuseState(initialValue) {
let state = initialValue;
 
functionsetState(newValue) {
    state = newValue;
// 리렌더링 예약 (React 내부 처리)
  }
 
return [state, setState];
}

⚠️ 실제 React 구현과는 다르지만

클로저 관점 이해를 위한 예시

7️⃣ useState 예시로 이해하기

functionCounter() {
	const [count, setCount] =useState(0);
	
	return (
	<buttononClick={() => setCount(count + 1)}>
	      클릭: {count}
	</button>
	 );
}

여기서 벌어지는 일

count → 현재 렌더 시점의 상태 값
setCount → 내부 상태를 참조하는 클로저 함수
setCount가 살아 있는 동안
상태는 메모리에 유지됨

👉 컴포넌트가 리렌더돼도 상태가 사라지지 않는 이유

8️⃣ 클로저와 stale closure (간단 언급)

useEffect(() => {
	setInterval(() => {
	console.log(count);
	  },1000);
}, []);

이 콜백은 초기 렌더의 count만 기억
이후 상태 변경을 반영하지 못함
👉 stale closure 문제

이 문제는 클로저 자체의 문제가 아니라

렌더 시점의 스코프를 기억하는 특성 때문

9️⃣ 클로저의 핵심 요약

❌ 오해

익명 함수여야 한다
return 해야 한다
변수에 할당해야 한다

✅ 진실

함수가 외부 스코프 변수를 참조하면
그 함수는 클로저다
참조가 유지되는 동안 상태도 유지된다

Js에서 Closure(클로저)