[TIL] JavaScript - async/await

오늘 공부한것 & 기억하고 싶은 내용

오늘은 API를 가지고 와서 그 데이터를 화면에 뿌려주는 작업을 하는 강의를 들었다.
회사에서도 API를 가지고 작업한 적이 있었는데 (최근엔 없고, 아주 오래전에..) 다 까먹고 있다가
강의를 들으면서 다시 개념을 공부해보았다.

.then()을 사용하는 예시

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

이 코드는 서버에서 데이터를 가지고 와서 응답을 받은 후 json으로 변환해서 출력하는 가장 기본적인 방식이다.
하지만 .then()을 여러번 써야하기 때문에 중첩 이슈로 코드가 복잡해 질 수 있다. (실제로 회사 개발자분께서도 then은 나이스하지 못하다고 몇번이고 말씀하심)

async/await를 사용하는 예시

async function getData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

getData();

• then() 함수와 같은 코드인데 console.log를 제외한다고 치면 엄청 간결해졌다.
• async는 이 함수가 비동기적으로 동작한다는 걸 선언(?)하는 것이다.
• await는 fetch가 완료될 때까지 기다린 후에 다음 코드를 실행해주기 때문에 코드가 순차적으로 진행되는 것처럼 보인다.
• try/catch는 에러가 생겼을때 이를 처리할 수 있도록 도와준다.

배운점 & 느낀점

자바스크립트를 공부하려면 비동기를 이해하는 것이 가장 중요한 거 같다.
아직 나는 한참 멀었다... 더 많은 예제를 풀어봐야겠지..

자바스크립트를 이해하고, 리액트에 한 발자국 더 다가가려면
useState / useEffect / 구조분해할당 / map / fetch
이 개념들만 알아도 성공적이라던데 ........ 앞으로 차근차근 공부해서 정리해봐야겠다.