클로저란? : 함수와 함수가 선언된 어휘적 환경(Lexical Scope)의 조합
function add() {
const a = 10
function innerAdd() {
// innerAdd() 은 내부 함수이며, 클로저다.
const b = 20
console.log(a + b);
}
innerAdd();
}
add();함수가 중첩된 상황에서 a 변수의 유효범위는 add 전체이고, b 변수의 유효범위는 innerAdd 전체이다.
선언적 어휘적 환경이란, 변수가 코드 내부에서 어디서 선언됐는지를 말하는 것이다.
변수의 유효범위, 스코프(Scope)
변수의 유효범위에 따라서 어휘적 환경이 결정된다. 이러한 변수의 유효 범위를 스코프(scope)라고 한다.
1. 전역 스코프(global)
이름에서 알 수 있듯, 이 스코프에서 변수를 선언하면 어디서든 호출 가능하다.
2. 함수 스코프(Function-level scope)
함수 스코프는 함수 내부에서 선언된 변수가 해당 함수 내부에서만 접근 가능한 것을 의미한다.
즉, 함수 내부에서 선언된 변수는 함수 외부에서 접근할 수 없다.
function hello() {
var local = 'local variable'
console.log(local) // local variable
}
hello()
console.log(local) // ReferenceError함수 내부에서 선언된 local 변수는 함수 내부에서 접근 가능하지만 함수 외부에서는 접근할 수 없다.
var x = 10
function foo() {
var x = 100
console.log(x) // 100
function bar() {
var x = 1000
console.log(x) // 1000
}
bar()
}
console.log(x) // 10
foo()중첩 되어있을 경우 가장 가까운 변수를 참조한다. 전역 스코프의 x는 전역 변수인 x를 참조하게 된다.
리액트에서의 클로저
클로저의 원리를 사용하고 있는 대표적인 것 중 하나는 useState이다.
function Component() {
const [state, setState] = useState()
function handleClick() {
setState((prev) => prev +1)
}
}useState 함수의 호출은 첫 줄에서 종료되었지만,
useState 내부에서 클로저가 활용되었기 때문에 setState는 계속해서 최신 값을 확인할 수 있는 것이다.
handleClick 함수는 클로저를 사용하여 이전 상태를 참조하고, 상태를 업데이트 할 수 있다.
클로저를 통해 컴포넌트의 렉시컬 스코프에 접근할 수 있어, 상태 관리와 업데이트가 효과적으로 이루어질 수 있는 것이다.
클로저를 활용하면 전역 스코프의 사용을 막고, 개발자가 원하는 방향으로 정보를 노출시킬 수 있다는 장점이 있다.
'Web > 모던 리액트 Deep Dive' 카테고리의 다른 글
| [모던 리액트 Deep Dive] 리액트에서 자주 사용하는 자바스크립트 문법 (0) | 2024.04.29 |
|---|---|
| [모던 리액트 Deep Dive] 이벤트 루프와 비동기 통신의 이해 (0) | 2024.04.28 |
| [모던 리액트 Deep Dive] 클래스 (1) | 2024.04.28 |
| [모던 리액트 Deep Dive] 함수 (0) | 2024.04.27 |
| [모던 리액트 Deep Dive] 자바스크립트의 동등비교 (0) | 2024.04.27 |
