[240426 TIL] 클로저

드디어 제가 클로저에 대해 조금 이해한 것 같습니다..!

 

그동안 여러번 공부했지만 이해하지 못했던 것 같은데

이제야 드디어 약간(?) 알겠어서 정리해봅니다.

공식 정의(?)가 아닌 제가 이해한 바를 정리해보려고 합니다.

 

클로저란?

상태를 안전하게 변경하고 유지하기 위해(은닉화) 사용하는 JS의 기능으로

중첩된 함수에서, 외부함수의 생명주기가 종료했음에도 여전히 상태가 참조되고 있는 것!

 

일반적인 상황

// 함수가 호출될때다 증가해야하는 상태변수
let num = 0;

// 상태 변경 함수
const increase = () => {
    return ++num
}

console.log(increase()); // 1
// 만약 여기서 
num = 100; // 이런식으로 변경해버리면
console.log(increase()); // 101
// 이렇게 문제가 생긴다...

 

문제 : 스코프가 전역인 num 변수는 개나소나 다 접근하고 바꿀 수 있다..

 

클로저를 사용할 경우

// 클로저를 사용한 상태변경 함수
const increase = (() => {
	let num = 0;
    
    //클로저
    return () => {
    	return ++num;
    }
})();

console.log(increase()); // 1
console.log(increase()); // 2
console.log(increase()); // 3

 

increase() 를 호출하면,

1. 즉시실행 함수가 실행되고 소멸됨(call stack에서 pop up)

2. return ++num 하는 무명 함수가 반환됨

3. 반환된 함수는 increase에 할당

4. 이 increase에 할당된 함수는 자신이 '정의'된 위치에 의해 결정된 상위 스코프의 '렉시컬 환경'을 기억함!

5. increase() 가 실행 되면, 상위 스코프의 num 상태를 계속 참조할 수 있다!

6. 외부함수는 종료되었지만, 가비지 컬렉터는 num 을 회수하지 않음.

7. 따라서 여전히 참조할 수 있고, 상태는 계속 유지됨! 외부에서 접근할 수 없는 은닉된 값, 의도되지 않은 변경도 걱정없음

 

그리하여,

 

클로저란 함수와 그 함수가 선언된 렉시컬 환경과의 조합이다 - mdn

라는 것이 이해가 되었습니다...

 

 

참고: 리액트 훅 에서의 클로저 용례 관련

https://velog.io/@giriboy/useState-useEffect-with-Closure

useState, useEffect with Closure