StatesAirline Client

 Part 2: AJAX 요청

    🧩 Side Effect는 useEffect에서 다뤄야 합니다                                           
      √ 검색 조건이 바뀔 때마다, FlightDataApi의 getFlight를 검색 조건과 함께 요청해야 합니다
      √ getFlight의 결과를 받아, flightList 상태를 업데이트해야 합니다
      √ 더 이상, 컴포넌트 내 필터 함수 `filterByCondition`를 사용하지 않습니다      
      √ 더이상, 하드코딩된 flightList JSON을 사용하지 않습니다 (초기값은 빈 배열로 둡니다) 
      √ getFlight 요청이 다소 느리므로, 로딩 상태에 따라 LoadingIndicator 컴포넌트를 표시해야 합니다
    🧩 FlightDataApi에서 기존 구현 대신, REST API를 호출하도록 바꿉니다
      √ 검색 조건과 함께 StatesAirline 서버에서 항공편 정보를 요청(fetch)합니다

 

---

 

useEffect(() => {

    const fetchData = async () => {

      setIsLoading(true);

      const data = await getFlight(condition); // await을 까먹음

      console.log(data);

      setFlightList(data);

      setIsLoading(false);

    };

    fetchData();

  }, [condition]);

 

 

useEffect는 첫 렌더링, condition이 변화할 때 (검색) 로딩을 구현하고 getFlight 함수로 fetch -> json 데이터를 setFlightList(data)로 변경시키고 렌더링을 해준다.

 

근데 await을 까먹어서 화면에 렌더링이 안되고 리스트를 만드는. map 메서드도 에러를 일으키기 시작함 👻

 

값이 다르게 들어오나 싶어 콘솔을 찍어보니까 🤔

Promise {<pending>}

 

 

프로미스 객체로 펜딩상태가 들어온 것을 보고 눈치를 챘다.. getFlight(condition)이 반환되지 않은 채로 오류가 떴다는 걸... 이후 await으로 결과를 받을 때까지 중지시키고, 그 이후에 실행이 되게 바꿨더니 잘 된다...

 

더 자세하게는 getFlight(condition)은 비동기 함수이며, 함수가 반환하는 값은 Promise 객체인데, setFlightList(data)가 Promise 객체를 받는 것이 아니라 데이터를 받아서 업데이트를 한다. 이때 await을 사용하지 않고 Promise 객체를 setFlightList 함수의 인자로 전달하면, 데이터가 아닌 Promise 객체가 flightList에 저장되어버리게 된다. 즉, flightList는 Array 타입이 아닌 Promise 객체가 되었고 map함수를 사용할 수 없게 되어서 에러가 떴던 것.

 

콘솔로그야 고마워 🫠🫠🫠