Lexical Scoping (Lexical Scope)
- 자바스크립트의 컴파일러는 토큰화(Tokenizing)와 렉싱(Lexing)을 처음에 하는데 이는 코드를 토큰 단위로 분리하여 의미를 매핑시키는 단계이다.
- Lex-time이란 토큰에 의미를 부여하는 렉싱 과정을 말하며, 이 때 자바스크립트의 스코핑 개념인 렉시컬 스코프가 형성된다.
- 함수를 선언할 때 정의되는 스코핑 형태
- 함수가 어디에 적혀있는가에 따라서 스코프가 구성되는 방식
- Lexical Scope는 함수를 어디서 선언하였는지에 따라 상위 스코프를 결정 (함수가 호출이 아님)
Scope Chain, [[Scopes]]
EC -> Execution Context (실행 컨텍스트)
- EC안에 스코프 체인을 참조하는 [[Scopes]]를 갖게 된다.
- [[Scopes]]는 연결리스트 형식으로 현재 스코프부터 상위 스코프를 참조하게 되는데, 이는 변수식별(Identifier Resolution)을 할 때 사용한다.
Closure
- 내부 함수에서 외부 함수 범위에 대한 접근을 제공하는 것
- 함수가 속한 렉시컬 스코프를 기억하여 함수가 렉시컬 스코프 밖에서 실행될 때에도 이 스코프에 접근할 수 있게 하는 기능
- 생명 주기가 끝난 외부 함수의 변수를 참조하는 함수
- 함수와 함수가 선언된 어휘적 환경의 조합
React Hook
- 공식문서에 따르면, Hook을 통해 해결하려는 문제는 다음과 같다.
- 컴포넌트간에 재사용이 어려운 stateful logic
- 이해하기 어렵게 복잡해지는 컴포넌트들
- 모두를 혼동시키는 클래스형 컴포넌트
- 함수형 컴포넌트에서 React의 상태 및 라이프사이클 기능에 연결할 수 있는 함수
- 클래스형 컴포넌트에서 동작하지 않으며, 클래스 없이 React의 여러 기능을 사용할 수 있다.
- Hook은 React 개념에 대한 지식을 대체하지 않는다.
- Hooks는 props, state, context, refs 및 lifecycle과 같이 이미 알고 있는 개념에 보다 직접적인 API를 제공한다.
- Hook을 사용하면 수명 주기 방법에 따라 분할을 강제하는 대신 관련된 부분에 따라 하나의 구성 요소를 더 작은 기능으로 나눌 수 있다. (ex. useEffect)
- 컴포넌트에서 상태가 있는 로직을 추출하여 독립적으로 테스트하고 재사용할 수 있다.
개발자(진)