● 3월 31일 ~ 4월 3일 Section 2 / Unit9 - [React] 클라이언트 Ajax 요청

● 오늘 공부한 것

비동기 함수로 데이터 받아오기

FlightDataApi.js

export async function getFlight(filterBy = {}) {
  // HINT: 가장 마지막 테스트를 통과하기 위해, fetch를 이용합니다. 아래 구현은 완전히 삭제되어도 상관없습니다.
  // TODO: 아래 구현을 REST API 호출로 대체하세요.

  const url = 'http://ec2-13-124-90-231.ap-northeast-2.compute.amazonaws.com:81/flight'
  let param = filterBy.destination ? `${url}?departure=${filterBy.departure}&destination=${filterBy.destination}` :
  `${url}?departure=${filterBy.departure}`

  const res = await fetch(param).then(res => res.json());
  return res;
  }

 

Main.js

  useEffect(() => {
    setisLoading(true);
    getFlight(condition)
    .then(res =>{
      setFlightList(res);
      setisLoading(false);
    })
  }, [condition])

{isLoading ? <LoadingIndicator></LoadingIndicator> : <FlightList list={flightList}></FlightList>}

 

 

● 내가 놓치고 있던 것

• React 17버전이전에는 setTimeout, fetch 같은 비동기 함수를 사용할 때는 batching 이 되지 않는다.
• 18버전부터는 —> auto batching이 된다.
• 이전에 정리 해두었던, fetch와 axios는 프로미스를 반환하고, resolve되면 response 객체를 반환한다.
• 그리고나서 후속메서드가 쓰이면 또 프로미스를 반환하고, resolve 된 값을 사용할 수 있다.

fetch와 axios는 response 객체를 반환?

 

● 수업 이외의 공부

• 할일 메모장 만들기
• useState, useRef 공부
• 모던자바스크립트 복습
• 코테 문제 풀기 (5개정도푼거같다)
• 네트워크 책읽기

●useState 사용법

● useRef 사용법