[모던 리액트 Deep Dive] 클로저

클로저란? : 함수와 함수가 선언된 어휘적 환경(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 함수는 클로저를 사용하여 이전 상태를 참조하고, 상태를 업데이트 할 수 있다.

클로저를 통해 컴포넌트의 렉시컬 스코프에 접근할 수 있어, 상태 관리와 업데이트가 효과적으로 이루어질 수 있는 것이다.

클로저를 활용하면 전역 스코프의 사용을 막고, 개발자가 원하는 방향으로 정보를 노출시킬 수 있다는 장점이 있다.