1. 동기 / 비동기
1) 동기
- 코드가 같은 회기에 실행됨. 즉 한 회기에 모든 코드가 위에서 아래로 순차적으로 실행됨
- 작업의 시작 시점이 순차적이라는 뜻임.
2) 비동기
- 코드가 같은 회기 안에 실행되지 않음. 즉 한 회기에 모든 코드가 순차 실행되지 않음.
- 시간이 오래 걸리는 작업은 "나중에 처리" 하고 다음 코드부터 실행
ex ) setTimeout, fetch, 이벤트리스너 등
2. async / await
1) await 는 비동기 작업이 끝날 때까지 기다리는 키워드, await가 있으면 해당 줄에서 잠깐 멈췄다가, 완료되면 다음 줄 실행
2) await는 async 함수 안에서만 사용 가능
3) 기본적으로 모든 코드들은 위에서부터 순차적(동기적)으로 실행되는데, 작업의 시작 시점은 순차적이나 해당 작업들이 완료를 보장하지 않고 다음 작업을 시작함. 즉, 특정 작업이 끝나기 전에 다음의 작업 코드가 실행됨으로써 결과에 오류가 생길 수 있음.
=> 이를 방지하기 위해 코드를 일시적으로 비동기화(작업 완료시점까지 기다린 후 다음 작업 진행) 하기 위해 사용함
3. 이벤트 리스너의 return값을 외부에서 사용하기
- 이벤트 리스너는 비동기 작업임
- 리턴 값을 new Promise() 객체 생성 후, resove()로 감싸주면 됨!
'React' 카테고리의 다른 글
| forwardRef : 컴포넌트 외부에서 내부 요소 조작, 트리거 하기 (0) | 2025.05.20 |
|---|---|
| 배열의 요소마다 await 적용 시, for ~ of 사용(.map과 비교) (0) | 2025.05.14 |
| Promise 함수 (resolve, reject) (1) | 2025.04.22 |
| 함수 선언 방식에 따른 차이 (0) | 2025.03.06 |