📆 날짜

2023/12/15(금)

📚 챕터

클로저란 무엇인가

---

👨🏻‍💻 학습 내용

🎯 클로저란?

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

예제코드를 살펴보자.

<script>
function add () {
const a = 10;

function innerAdd(){
const b = 20;
console.log( a + b );
  }
  function innerAdd()//30
}
</script>

a 변수의 유효범위는 add 전체이고 , b 변수의 유효범위는 innerAdd 전체다.
"선언된 어휘적 환경" 이라는 것은 , 변수가 코드 내부에서 어디서 선언됐는지
말하는것이다.
클로저란 이러한 어휘적 환경을 조합해 코딩하는 기법이다.

➡️ 다음은 변수의 유효 범위 스코프에 대해 살펴보자.