병렬 패칭 , Suspense

예를 들어 4초가 걸리는 비동기통신 자료가 있다고 하자.

4초동안 걸리는 이유는 직렬로 비동기를 돌려서 그런거라고 하자.

그냥 그렇다고 하자.

이런 경우엔 시간 단축을 할 수 있다.

병렬로 데이터를 받는 것이다.

 

Promise.all을 사용하면 된다.

 

Promise.all: <- 여러 개의 Promise(비동기처리)를 배열로 받아서 병렬로 수행하는 함수

만약 하나라도 거부되면 전체가 거부된다. <= try , catch문 사용하면 문제 없음.

// 두 개의 API 엔드포인트를 호출하여 결과를 병렬로 받아오는 함수
async function fetchParallel() {
    // 첫 번째 API와 두 번째 API 엔드포인트
    const url1 = 'https://api.example.com/data1';
    const url2 = 'https://api.example.com/data2';

    try {
        // Promise.all을 사용하여 두 개의 요청을 병렬로 수행
        const [response1, response2] = await Promise.all([
            fetch(url1),
            fetch(url2)
        ]);

        // 두 개의 응답을 JSON으로 파싱
        const data1 = await response1.json();
        const data2 = await response2.json();

        // 결과 출력
        console.log('Data from API 1:', data1);
        console.log('Data from API 2:', data2);
    } catch (error) {
        // 에러 처리
        console.error('Error fetching data:', error);
    }
}

// 병렬 패칭 함수 호출
fetchParallel();

 

---

 

Suspense

서스펜스는 미결 , 미정이라는 뜻을 갖고 있다.

그 말그대로 리액트에서 "데이터 패칭이 안됐을 때 이걸 보여주세요" 하는 거다.

즉 , 로딩 기능을 갖고 있는 놈이다.

<Suspense fallback={<h1>로딩중...<h1>}
<데이터패칭 1 />
<Suspense/>
<Suspense fallback={<h1>로딩중...2<h1>}
<데이터 패칭 2 />
<Suspense/>

이렇게  하면 데이터패칭1 컴포넌트가 로딩중일 때 로딩중... 이 뜨고

데이터페칭 2가 로딩중이면 로딩중...2 가 뜨는 것이다.

 

fallback={}

저 안에 넣어주면 된다.

참고로 이놈은 텍스트 뿐만 아니라 컴포넌트를 넣어도 된다.