[💻 코드스테이츠 FE 44기] StatesAirline Client - Part 2 과제 진행

✔️ 시작

React에 fetch를 이용해 Api를 연결하고
화면의 렌더링 속도가 느릴 경우 로딩 화면이 보이도록 작업하는 과제를 진행했다.

📍알게된 부분

• import한 부분은 주석 처리하지 않고 완전 삭제해야 문제되지 않는다.

• useEffect Hook을 이용해 AJAX 요청과, 로딩 화면을 같이 진행할 수 있다.

import { getFlight } from '../api/FlightDataApi'; //로컬에 저장된API 불러오기
import { useEffect, useState } from 'react';

const [Loading, setLoading] = useState(false); //로딩화면 state로 선언

useEffect(() => {
	Loading(true);
  	getFlight(값);// 로컬에 저장된 API 불러오기
  	//.then(res => res.json()) // jon()으로 변경해주기(getFlight는 이미 json()되어 있어 생략됨)
  	.then(result => {
    	setFlightList(result)
     	setIsLoading(false);
    })
}, [종송속 배열])

return(
  //삼항 연산자 사용해 Loading이 true, false일 때 다르게 적용해 주기
{Loading 
	? <LoadingIndicator />
	: <FlightList list={flightList} />
	}
)

• API 링크 작성할 때 변수를 추가할 경우 ${변수}로 작성해 준다.

let url = `http://주소/data?${result}`
fetch(url)
.then(res => res.json())

✏️ 마치며

fetch를 이용하는 방법은 알았지만 REST API 호출과 같이 연관 지어서 진행하려고 하니
생각 보다 어려웠고 문제를 풀어도 이해하는데 오래 걸렸다.

이번 과제 영역은 다시 복습하는 시간을 가져야 할 것 같다.