2022-12-05 (월)

< Hook과 Closure >

Custom Hook?
내가 필요로 하는 상태 로직들을 모아 직접 Custom한 Hook
쓰임에 따라 정의와 특징이 다양함

🫐 Hook의 규칙

1. 오직 리액트 함수 내에서 훅을 호출해야 함
2. 훅을 일반적인 자바스크립트 함수에서 호출하지 않기
   👇
   ✅React함수 컴포넌트에서 Hook을 호출하기
   ✅Custom Hook에서 Hook을 호출해야함

🍅 Custom Hook의 장점

1. 코드가 짧아지며 Component가 가벼워지고 가독성도 좋아져서 한 눈에 파악하기 쉬워짐.
2. 해당 Hook의 상태를 다른 Component에 가져다 사용할 수 있어서 '중복코드가 생성되지 않는다!'

🍊 Closure

Closure ?
함수와 함수가 선언된 렉시컬 스코프의 조합이다.
Closure는 함수가 속한 렉시컬 스코프를 기억하며 함수가 렉시컬 스코프 밖에서 실행할 때에도 이 스코프에 접근할 수 있게 하는 기능을 못한다.

렉시컬 스코프(정적 스코프) ?
함수를 어디서 호출하는 지가 아니라 어디서 선언하였는지에 따라 변수의 실제 값이 결정된다.
=> 간단하게 표현하자면, "함수는 자신이 태어나는 순간을 기억하고 있다."

함수가 어디서 선언되었는지 -> 정적스코프

🤔 Closure는 왜 Closure 일까 ?

말 그대로 닫아서 폐쇄시키기 때문 !

=> 우리는 함수를 호출하여 a라는 변수의 값을 출력할 순 있지만 이 변수를 수정하거나 조작할 순 없습니다.