[모던 리액트 딥다이브] 1.4장 클로저

클로저란

• 함수와 함수가 선언된 렉시컬 환경의 조합
• 선언된 렉시컬 환경 : 변수가 코드 내부에서 어디서 선언됐는지를 의미

 

스코프

• 전역 스코프
  • 전역 스코프에서 선언된 변수는 어디서든 호출 가능함
  • window, global
• 함수 스코프
  • 자바스크립트는 기본적으로 함수 레벨 스코프를 따름 ( {} 블록이 스코프 범위를 결정하지 않음)

 

클로저의 활용

• 자바스크립트는 함수 레벨 스코프를 가지고 있고, 스코프는 동적으로 결정됨
• 클로저를 활용하면 한 변수나 상태 값을 별도로 관리하는 클로저 내부에서만 접근 가능함

function Counter() {
	var cnt = 0
    
    return {
    	increase : function () {
        	return cnt++
        },
        decrease : function () {
        	return cnt--
        },
        counter : function() {
        	return counter
        },
    }
}

var c = Counter()

c.increase() // 1
c.decrease() // 0

 

 

 

리액트에서의 클로저

• 클로저의 원리를 사용하고 있는 대표적인 훅이 useState

function Component() {
	const [state, setState] = useState()
    
    function handleClick() {
    	// useState 호출은 위에서 끝났지만 계속 내부의 최신값을 알 수 있음
        // 이는 클로저를 활용했기 때문이다
    	setState((prev) => prev + 1)
    }
}

 

 

클로저를 사용할 때 주의점

• 자바스크립트가 함수 레벨 스코프를 기본적으로 가지고 있기 때문에 이를 잘 알지 못하면 엉뚱한 결과값을 얻을 수 있음
• 클로저를 사용하면 생성될 때마다 그 선언적 환경을 기억해야 하므로 추가로 비용이 발생함
• 메모리를 불필요하게 잡아먹거나 성능에 좋지 않은 영향을 끼침