function test1() {
// test1 함수 실행
// **만약 then then 없다면!**
// IO 일어나는 http 통신이 10초 걸린다 치자
// 통신 끝날 때 까지 test1 종료 안됨 -> 블락됨
fetch();
}
function test2() {
// 10초 뒤 test2 실행됨
console.log("test2");
}
const Hello = () => {
// 실행되면 test1 함수 호출
test1();
test2();
// test2 끝나면 그림그려짐 => 10초 있다 그림그려짐
return (
<div>
<h1>화면 그려짐</h1>
</div>
);
};
export default Hello;
⇒ 그래서 이때 IO 일어나는 것들은 promise 기반의 함수를 실행한다
⇒ 미래 데이터를 약속함 (나중에 줄게~~~~)
fetch → future 를 리턴 (|| promise 를 리턴) ⇒ callback 기법
await : 다 되기를 기다렸다가 실행됨
async
async function test1() { // -> 비동기
// IO 일어나서 10초 기다림
// 기다렸다가 result에 값을 넣어주기로 ^약속^만 하고
// 함수 종료됨 (.then()이랑 같지?)
let result = await fetch();
// 10초 뒤에 result 값 담기면 js에서 그림 그려줌 쿼리셀렉터웅앵웅 써서
return result;
}
async function test2() {
let r = test1();
}
const Hello = () => {
test1();
test2();
return (
// 그림도 그리고
<div>
<h1>화면 그려짐</h1>
</div>
);
};
export default Hello;