자바스크립트는 기본적으로 함수 레벨 스코프를 따름 ( {} 블록이 스코프 범위를 결정하지 않음)
클로저의 활용
자바스크립트는 함수 레벨 스코프를 가지고 있고, 스코프는 동적으로 결정됨
클로저를 활용하면 한 변수나 상태 값을 별도로 관리하는 클로저 내부에서만 접근 가능함
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)
}
}
클로저를 사용할 때 주의점
자바스크립트가 함수 레벨 스코프를 기본적으로 가지고 있기 때문에 이를 잘 알지 못하면 엉뚱한 결과값을 얻을 수 있음
