Section2 Unit9 [React] 클라이언트 Ajax 요청 - StateAirline Client 과제 리뷰

---

Section2 Unit9 [React] 클라이언트 Ajax 요청 - StateAirline Client 과제 리뷰

 

⭐️ 과제. StateAirline Client

✔️ Bare Minimum Requirement

✅ Part 1 테스트 통과

✅ Part 2 테스트 통과

 

✏️ 구현 과정 노트

✨ Search.js

import { useState } from "react";

function Search({ onSearch }) {
  const [textDeparture, setTextDeparture] = useState("ICN");
  const [textDestination, setTextDestination] = useState("");

  const handleChange = (e, callback) => {
    callback(e.target.value.toUpperCase());
  };

  // const handleKeyDown = (e) => {
  //   if (e.type === "keydown" && e.code === "Enter") {
  //     handleSearchClick();
  //   }
  // };

  const handleSearchClick = (e) => {
    e.preventDefault();
    console.log("검색 버튼을 누르거나, 엔터를 치면 search 함수가 실행됩니다");

    // TODO: 지시에 따라 상위 컴포넌트에서 props를 받아서 실행시켜 보세요.
    onSearch({ departure: textDeparture, destination: textDestination });
  };

  return (
    <form onSubmit={handleSearchClick}>
      <fieldset>
        <legend>공항 코드를 입력하고, 검색하세요</legend>
        <span>출발지</span>
        <input
          id="input-departure"
          type="text"
          value={textDeparture}
          onChange={(e) => handleChange(e, setTextDeparture)}
          placeholder="ICN, CJU 중 하나를 입력하세요"
          // onKeyDown={handleKeyDown}
        ></input>
        <span>도착지</span>
        <input
          id="input-destination"
          type="text"
          value={textDestination}
          onChange={(e) => handleChange(e, setTextDestination)}
          placeholder="CJU, BKK, PUS 중 하나를 입력하세요"
          // onKeyDown={handleKeyDown}
        />
        <button type="submit"
          id="search-btn" 
          // onClick={handleSearchClick}
          disabled={ textDeparture === "ICN" || textDeparture === "CJU" ? false : true }
        >검색
        </button>
      </fieldset>
    </form>
  );
}

export default Search;

💬 onSearch({ destination: textDestination }); 이렇게 전달해도 되는거 몰라서 한참 헤맸다...

💬 form 태그에 submit 이벤트를 적용시켜 기존의 handleKeyDown 함수는 사용하지 않는 방향으로 변경 (form 태그 내에서 Enter를 눌렀을 때 submit 이벤트가 발생하기 때문에 이벤트를 바로 적용할 수 있다.) 

💬 기존에 도착지만 설정하는 코드에서, 출발지도 지정할 수 있도록 변경

💬 출발지에 아무것도 입력하지 않으면 버튼이 disabled 되도록 button 태그에 disabled 속성을 조건부 렌더링으로 작업

 

📌 네트워크 요청은 느리고 비싸다!!

1. 전체 항공편을 받아온 후 사용자 설정한 조건대로 전체 항공권 목록을 필터링 ❌

2. 쿼리 파라미터를 통해 전체가 아닌 사용자가 설정한 조건에 해당하는 항공권 목록 받아와서 그대로 렌더링 ⭕

 

// fetch로 데이터 가져오기
function getFlight(filterBy) {
  const departure = filterBy.departure;
  const destination = filterBy.destination;

  const data = fetch(`testurl.com/flight?departure=${departure}&destination=${destination}`)
    .then(res => res.json())

  return data;
}

useEffect(() => {
  setIsLoading(true);
  getFlight(condition)
    .then(data => setFlightList(data))
    .finally(() => {
      setIsLoading(false);
    })
}, [condition])

 

---

🌙  오늘의 회고

 States Airline 과제를 마무리하고, 필요할 것 같은 기능들을 좀 더 구현해보았다. 실제로 화면을 보면서 데이터를 받아와서 뭔가를 만드니 확실히 재미가 있다고 느껴졌다. 과제를 제출하고, 다음 유닛인 node로 server 만드는 파트를 조금 봤는데, 이건 정말로 처음 접하는 개념이라 이해도 안되고 너무 어려워 보였다. 오늘부터 예습을 해야지… 🫥