- 자바스크립트에는 값을 저장하기 위한 수단이 많은데, 클로저는 자바스크립트 엔진의 성질을 이용하는 방법.
- react.js 는 클로저를 많이 사용하기 때문에, 이걸 한번 짚고 넘어가면 react.js 를 배우실때 도움이 될 것 같다.
- 신입사원이 입사했을때 코드를 설명하기 위해 만들었던 자료로 설명을 해 보려고 한다(결국은 react.js를 모르는 경력자에게 설명했던게 함정).
- 순서는 아래와 같다
- 실행 컨텍스트
- 클로저
- react.js의 useState
- use*
- 실행 컨텍스트를 눈으로 확인해 봅시다.
- 자바스크립트 엔진은 자바스크립트 파일을 읽어서 실행컨텍스트 라는것을 만든다.
- 실행컨텍스트는 함수마다 만들어진다.
- 실행컨텍스트가 함수를 실행하기 전에 만들어진다는걸 기억하자.
- 함수가 호출되면 실행컨텍스트가 콜 스택에 쌓인다.
- 그 다음에 클로저를 눈으로 확인해야 한다
- 자바스크립트의 함수는 바깥함수의 변수도 읽거나 쓸 수 있어야 한다.
- 그래서 자바스크립트 엔진은 안쪽함수의 실행 컨텍스트에 바깥함수의 정보를 넣어버린다.
- 안쪽함수가 가지고 있는 바깥함수의 정보를 클로저라고 한다
- 실행컨텍스트가 함수를 실행하기 전에 만들어진다는걸 기억하자
- 클로저는 함수를 실행하기 전에 만들어진다
- 클로저는 값을 저장하는 저장소로 사용할 수 있다.
- react.js 의 함수형 컴포넌트는 값을 저장할때 useState라는 함수를 사용한다.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent