[React] Loading Indicator

Before you learn

● React State

● JSON

● Express

● fetch

● promise

반응형

---

Loading Indicator

(= 로딩 화면)

 

네트워크 요청을 통해 데이터를 가져올 때까지 로딩 화면을 통해 네트워크 요청중이라는 표시를 하여

유저의 이탈을 방지하고, 화면이 멈춘 상태가 아님을 나타내므로,

 

로딩 화면의 구현은 필수적이다.

 

예제를 보며 익혀봅시다!

// example
import { useEffect, useState } from 'react';

const [isLoading, setIsLoading] = useState(false);
const [flightList, setFlightList] = useState([]);

// 생략, LoadingIndicator, FlightList 컴포넌트는 별도로 구현했음을 가정한다.

useEffect(() => {                                
  setIsLoading(true);         // 네트워크 요청 중인 경우 로딩화면을 보여줍니다.
  fetch(`http://서버주소/proverbs?q=${filter}`)   // 엔드포인트가 http://서버주소/proverbs라고 가정합니다.
    .then(res => res.json())  // 네트워크 요청을 성공적으로 받은 경우 받은 데이터를 json 형식으로 바꾼다.
    .then(result => {         // json 형식으로 바꾼 데이터(result)를 
      setFlightList(result);  // setFlightList에 할당하여 state를 업데이트 하여 렌더링한다.
      setIsLoading(false);    // 로딩화면을 없앤다.
    });
}, [filter]);                 // filter(검색 조건)가 바뀔 때 마다 useEffect 실행한다.

// isLoading이 true이면 로딩창 보여주고, false이면 조건에 따라 filter된 화면 보여주기
return {isLoading ? <LoadingIndicator /> : <FlightList list={flightList} />}

---

 

 

Loading Indicator를 알아보는 시간이었습니다.

틀린 내용은 댓글로 알려주시면 감사하겠습니다.