[2주차] 클로저,이벤트 루프와 비동기 통신의 이해 p.59-79 | 모던 리액트 딥다이브

*** 읽을 때 주의할 css

1. [링크]   

2. 밑줄 밑줄에 대한 개념 설명

3. h1제목

4. h2제목

 

모던 리액트 딥다이브 [2주차] 클로저,이벤트 루프와 비동기 통신의 이해 p.59-79

(자세한 예시는 꼭 책을 참고하시길 추천합니다.)

1.4 클로저

1.4.1 클로저란?

• 함수와 함수가 선언된 어휘적 환경(Lexical Scope)의 조합  *변수가 코드 내부에서 어디서 선언됐는지 말하는 것 
• 함수가 속한 렉시컬스코프를 기억하여 함수가 그 밖에서 실행될 때도 그 스코프에 접근할 수 있게 하는 기능

1.4.2 변수의 유효 범위, 스코프

전역 스코프 (global scope)

• 전역 레벨에 선언
• 브라우저 환경에서 전역 객체는 window이다.

함수 스코프

• 함수 레벨에 선언
• 자바스크립트 특징
• { }블럭이 스코프 범위를 결정하는 것이 아니라 함수 안에서 선언됐느냐를 봐야한다.

1.4.3 클로저의 활용

• 즉, 클로저는 함수레벨의 스코프를 활용해 어떤 작업을 하는 것
• 리액트에서의 클로저
  • useState
    • setState가 useState 내부의 최신 값을 계속 확인할 수 있는 이유는? 클로저가 useState 내부에서 활용됐기 때문!
    • 즉, 함수가 선언된 환경(state가 저장돼 있는 어딘가)을 기억하기 때문에 계속해서 state 값을 사용할 수 0
• 클로저가 선언된 순간 내부 함수는 외부 함수의 렉시컬 스코프를 기억해야하므로 일단 저장한다. 즉, 메모리를 크게 잡아먹어 성능에 영향을 미칠 수 있다. 적절한 스코프로 가둬야한다.
• 함수형 프로그래밍의 중요한 개념인 부수효과가 없고 순수해야한다는 목적을 위해 사용되는 개념이지만 주의가 필요하다.

 

[참고] var, let, const 비교 by 호이스팅(hoisting)

• ⇒ 변수 및 함수 선언문이 스코프 내의 최상단으로 끌어올려지는 현상 

• var 는 선언 단계와 초기화 단계가 동시에 진행됨.(undefined)- 에러x
  • 변수 재선언, 재할당 0 -function-scoped
  • 디버깅문제, 유지보수 문제
• let, const 은 그 단계가 분리됨. 즉, 호이스팅이 되지않은 것이아니라 호이스팅은 되었으나 메모리가 할당되지않아 접근할 수 없는 상태. 에러 0
  • let : 변수 재선언 x, 재할당 0 - block-scoped
  • const : 변수 재선언, 재할당 X -block-scoped
• TDZ : Temporal Dead Zone, 일시적인 사각지대. 스코프 시작지점에서 초기화시작점을 TDZ라고 한다.

 

1.5 이벤트 루프와 비동기 통신의 이해

1.5.1 싱글 스레드 자바스크립트

자바스크립트는 분명히 싱글 스레드에서 동기 방식으로 작동하지만, 많은 양의 비동기 작업이 이루어 지고 있다.

자바스크립트의 특징인 스레드란? 

*1개 프로그램 > 1개 프로세스 > 여러 개의 스레드

• 한 번에 하나의 작업만 동기방식으로 처리하는 것  *직렬 방식 ↔ 비동기(asynchronous)
• 하나의 코드 다음에 뒤의 코드가 실행됨 (Run-to-completion)

1.5.2 이벤트 루프란?

• 자바스크립트 런타임 외부에서 자바스크립트의 비동기 실행을 돕기 위해 만들어진 장치
• 호출 스택과 태스크 큐를 반복해서 감시하는 역할

콜 스택

• 자바스크립트에서 수행해야 할 코드나 함수를 순차적으로 담아두는 스택
• 실행된 코드의 환경을 저장하는 자료구조
• 함수 호출 시 이곳에 저장됨
• 가장 위에 쌓인 함수를 먼저 처리

비동기 작업 순서 ex) setTimeout( )

1. 코드가 동기식으로, 순차적으로 호출 스택 내부에 들어간다.
2. setTimeout( )을 만나면 타이머 이벤트가 실행되며 태스크 큐로 들어가고, 바로 스택에서 제거된다
3. 호출 스택에 있던 코드들이 실행되고 순서대로 제거된다.
4. 호출 스택이 비워졌다.
5. 이벤트 루프가 4번을 확인했다. 그리고 태스크 큐를 확인하니 2번의(setTimeout( )) 코드가 있어 그것을 호출 스택으로 보낸다.
6. 들어온 코드를 실행하고 호출 스택에서 제거된다.

태스크 큐

• ex) setTimeout, setInterval, setImmediate
• 실행해야할 태스크의 집합 (set의 형태)
• 비동기 함수의 콜백 함수, 이벤트 핸들러등이 담겨있음

마이크로 태스크 큐

• ex) Promises, process.nextTick, queueMicroTask, MutationObserver

랜더링은 언제 실행될까?

(마이크로 태스크 큐→ 랜더링) 반복 후 마이크로 태스크 큐가 비었다 → 태스크 큐

 

⭕️ KEY POINT

자바스크립트 자체는 싱글 스레드로 이루어져서 비동기 처리가 어렵지만, 태스크 큐, 이벤트 루프, 마이크로 태스크 큐, 브라우저/Node.js API 등이 적절한 생태계를 이루고 있어 싱글 스레드로는 불가능한 비동기 이벤트 처리가 가능해 졌다.

 

 

 

[참고] https://springfall.cc/article/2022-11/easy-promise-async-await

비동기 쓰는 경우: 기다리는 작업을 할때 (인터넷으로부터 데이터를 가져오는 작업이라든지, 파일을 읽고 쓰는 작업)