모던 리액트 Deep Dive - 클로저

⚡리액트 개발을 위해 꼭 알아야할 자바스크립트 - 1.4 클로저

리액트의 클래스형 컴포넌트에 대한 이해가 자바스크립트의 클래스, 프로토타입, this에 달려있다면, 함수형 컴포넌트에 대한 이해는 클로저에 있다!

1.4.1 클로저의 정의

• 함수가 바깥에 있는 변수를 기억하고 계속 쓸 수 있는 것

---

1.4.2 변수의 유효범위, 스코프(scope)

1. 전역 스코프 (global scope)

• 전역 레벨에서 선언하는 것
• 브라우저 환경에서 전역 객체는 window, Node.js 환경에서는 global이 있는데, 이 객체에 전역 레벨에서 선언한 스코프가 바인딩됨.
• 코드에서 global이라는 변수를 var와 함께 선언했더니 전역 스코프와 hello 스코프 모두에서 global 변수에 접근할 수 있는 것을 확인할 수 있음.

var global = 'global scope'

function hello() {
  console.log(global)
}

console.log(global) // global scope
hello() // global scope
console.log(global === window.global) // true

2. 함수 스코프 (Function Scope)

• 변수를 function 안에서 만들면 그 변수는 그 함수 안에서만 쓸 수 있음.

---

1.4.3 클로저의 활용

1.클로저의 활용

💡전역 스코프

• 장점 : 어디서든 원하는 값을 꺼내올수 있다.
• 단점 : 전역레벨에 선언되어 있어 누구나 수정할수 있다

리액트가 관리하는 내부 상태 값은 리액트가 별도로 관리하는 클로저 내부에서만 접근할 수 있다.

아래에서 자바스크립트 코드를 실행하면 어떤 클로저가 존재하는지등 확인할 수 있다.

https://ui.dev/javascript-visualizer

JavaScript Visualizer

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

• 리액트에서 클로저의 원리를 사용하고 있는 대표적인 것으로 useState가 있다.

function Component() {
  const [state, setState] = useState()

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

  // ...
}

🌚 useState 함수의 호출은 Component 내부 첫 줄에서 종료되었는데, setState는 useState 내부의 최신 값을 어떻게 계속해서 확인할 수 있을까?
바로 클로저가 useState 내부에서 활용됐기 때문이다.
외부 함수(useState)가 반환한 내부 함수(setState)는 외부 함수(useState)의 호출이 끝났음에도 자신이 선언된 외부 함수가 선언된 환경(state가 저장돼 있는 어딘가)을 기억하기 때문에 계속해서 state 값을 사용할 수 있는 것이다.

---

1.4.4 리액트에서 클로저 주의해야할 점

1.Stale Closure (오래된 값 참조)

• 클로저가 예전 state를 기억해 최신 값이 반영 안 될 수 있으므로 setState(prev => prev + 1) 같은 함수형 업데이트 사용

2. useEffect / useCallback 의존성 배열

• 의존성 배열에 값 빠지면 최신 값 반영 안 되므로, 참조하는 값은 반드시 의존성 배열에 넣어야 함

3. 비동기/타이머에서 최신 state 필요할 때

• 클로저 때문에 오래된 state 참조할 수 있으므로, useRef로 최신 값을 저장해서 사용함