1.4.1 클로저의 정의

1.4.1 클로저의 정의

클래스형 컴포넌트에 대한 이해가 자바스크립트의 클래스, 프로토타입, this에 달려있다면, 함수형 컴포넌트에 대한 이해는 클로저에 달려 있음. 함수형 컴포넌트의 구조와 작동 방식, 훅의 원리, 의존성 배열 등 함수형 컴포넌트의 대부분의 기술이 모두 클로저에 의존하고 있기 때문.

클로저

• 리액트에서 함수형 컴포넌트와 훅이 등장한 16.8 버전을 기점으로 클로저라는 개념이 리액트에서 적극적으로 사용되기 시작함.
• MDN에서 정의를 찾아보면 "클로저는 함수와 함수가 선언된 어휘적 환경(Lexical Scope)의 조합"이라고 돼있음.. 정의가 난해함

• // 어휘적 환경이란?
  function add() {
    const a = 10
    function innerAdd() {
      const b = 20
      console.log(a + b) 
    }
    innerAdd() // 30
  }
  
  add()

•  
• add 함수 내부에 innerAdd가 있고, innerAdd 함수는 내부에서 b 변수를 선언한 뒤, 자신의 함수 외부에 있는 a와 b를 더해서 정상적으로 30을 출력함. a 변수의 유효 범위는 add 전체이고, b 변수의 유효 범위는 innerAdd 전체임. innerAdd가 add 내부에 선언돼 있어 a를 사용할 수 있는 것. 즉, "선언된 어휘적 환경"이라는 것은, 변수가 코드 내부 어디서 선언됐는지를 말하는 것. 이는 앞서 이야기한, 호출되는 방식에 따라 동적으로 결정되는 this와 다르게 코드가 작성된 순간에 정적으로 결정됨. 클로저는 이러한 어휘적 환경을 조합해 코딩하는 기법임.