📰 데이터 요청 비교하기

Promises

• 비동기 작업의 최종 완료 또는 실패를 나타내는 개체

function fetchData(url) {
    return new Promise((resolve, reject) => {
        fetch(url)
            .then(response => {
                if (response.ok) {
                    return response.json();
                } else {
                    throw new Error('Network response was not ok');
                }
            })
            .then(data => resolve(data))
            .catch(error => reject(error));
    });
}

fetchData('https://api.example.com/data')
    .then(data => console.log(data))
    .catch(error => console.error('Fetch error:', error));

async-await

• 약속 위에 구축된 구문
• 이를 통해 전통적인 동기 코드와 더 유사한 비동기 코드를 작성

async function fetchData(url) {
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Fetch error:', error);
        throw error; // Rethrowing the error for the caller to handle
    }
}

async function main() {
    try {
        const data = await fetchData('https://api.example.com/data');
        console.log(data);
    } catch (error) {
        console.error('Unable to fetch data:', error);
    }
}

main();

비동기

네트워크 요청, 지연 설정 또는 정기적인 코드 실행과 같은 작업에 매우 중요

• Promises
  • 비동기 작업의 최종 완료 또는 실패를 나타내는 개체
  • 방법
    • .then() Promise의 해결 또는 거부에 대한 콜백을 첨부
    • .catch() 거부 처리(오류 시나리오)를 위한 콜백을 첨부
    • .finally() 결과에 관계없이 Promise가 정산된 후 실행되는 콜백을 첨부

// 생성
const myPromise = new Promise((resolve, reject) => {
    if (/* condition */) {
        resolve('Success');
    } else {
        reject('Error');
    }
});

// 사용
myPromise
    .then(result => console.log(result))
    .catch(error => console.error(error));

• setTimeout
  • 지정된 지연 후에 함수 또는 코드 조각 실행
  • setTimeout(function, delay, ...args) : 밀리초 후에 호출

setTimeout(() => {
    console.log('This message is displayed after 2 seconds');
}, 2000);

• setInterval
  • 각 호출 사이에 고정된 시간 지연으로 함수를 반복적으로 호출
  • setInterval(function, interval, ...args): 밀리초 마다 호출

setInterval(() => {
    console.log('This message is displayed every 3 seconds');
}, 3000);

• fetch
  • API는 요청 및 응답과 같은 HTTP 파이프라인의 일부에 액세스하고
    조작하기 위한 JavaScript 인터페이스를 제공
  • URL에서 데이터를 가져오고 응답을 Promise를 반환

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

• async await
  • Promises에 대한 구문론적 설탕으로 비동기 코드를 보다
    동기적이고 읽기 쉽게 보이기
  • 방법
    • async : 함수 앞의 키워드: 함수가 Promise를 반환
    • await : Promise가 해결될 때까지 함수 실행을 일시 중지

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

• Event Listener
  • 많은 JavaScript 이벤트는 click, load 등과 같이 본질적으로 비동기식
  • 이벤트 리스너를 추가하면 이벤트가 발생할 때 제공된 콜백이 비동기적으로 실행
  • element.addEventListener('click', () => { / ... / });

• RequestAnimationFrame (raf)
  • 애니메이션용으로 설계
  • 브라우저에 애니메이션을 수행하려는 사용자를 알리고
    다음에 다시 그리기 전에 브라우저가 지정된 함수를 호출하도록 요청

React 비동기 함수

• useEffect
  • 컴포넌트에서 사용하여 데이터 가져오기 또는 구독과 같은 비동기 작업을 수행

useEffect(() => {
    fetchData().then(data => {
        // Set state with fetched data
    });
}, []);

• 비동기 상태 업데이트를 처리할 때 메모리 누수 및
  경고를 방지하기 위해 상태를 업데이트

• 미들웨어(예: redux-thunk, redux-saga)와 함께 Redux와 같은
  상태 관리 라이브러리를 사용하여 복잡한 비동기 논리 및 부작용을 처리