[React] Client Ajax request [Test]

# 항공권 목록 필터링

---

• Main.js

export default function Main() {
  // 항공편 검색 조건을 담고 있는 상태
  const [condition, setCondition] = useState({
    departure: 'ICN',
  });
  const [flightList, setFlightList] = useState(getFlight);
  const [isLoading,setIsLoading] = useState(true);
  // 주어진 검색 키워드에 따라 condition 상태를 변경시켜주는 함수
  const search = ({ departure, destination }) => {
    if (
      condition.departure !== departure ||
      condition.destination !== destination
    ) {
      // console.log('condition 상태를 변경시킵니다');

      // TODO: search 함수가 전달 받아온 '항공편 검색 조건' 인자를 condition 상태에 적절하게 담아보세요.
      setCondition({departure,destination})
    }
  };

• Search.js

function Search({onSearch}) {
  const [textDestination, setTextDestination] = useState('');

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

  const handleKeyPress = (e) => {
    if (e.type === 'keypress' && e.code === 'Enter') {
      handleSearchClick();
    }
  };

  const handleSearchClick = () => {
    // console.log('검색 버튼을 누르거나, 엔터를 치면 search 함수가 실행됩니다');
    onSearch({departure : "ICN",destination : textDestination})
    // TODO: 지시에 따라 상위 컴포넌트에서 props를 받아서 실행시켜 보세요.
    //
  };

# AJAX 요청

---

• Main.Js

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

/* 생략 */

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

/*다른 풀이법 (async-await)*/

  useEffect(async() =>{
    setloading(true)
    setFlightList(await getFlight(condition))
    setloading(false)
  }, [condition])

/* 생략 */

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

• FlightDataApi.js

/* 생략 */

export function getFlight(filterBy = {}) {
  // HINT: 가장 마지막 테스트를 통과하기 위해, fetch를 이용합니다. 아래 구현은 완전히 삭제되어도 상관없습니다.
  // TODO: 아래 구현을 REST API 호출로 대체하세요.
  let filtered = Boolean(filterBy.destination); //false
  return(
    filtered 
    ? fetch(`http://ec2-13-124-90-231.ap-northeast-2.compute.amazonaws.com:81/flight?departure=ICN&destination=${filterBy.destination}`)
  .then((res) => res.json())
    :fetch(`http://ec2-13-124-90-231.ap-northeast-2.compute.amazonaws.com:81/flight`)
    .then((res) => res.json())
    )
/* 다른 풀이 방법 */
  
  let queryString = '';
  if (filterBy.departure) {
    queryString = queryString + `departure=${filterBy.departure}&`;
  }
  if (filterBy.destination) {
    queryString = queryString + `destination=${filterBy.destination}`;
  }

  let endpoint = `http://ec2-13-124-90-231.ap-northeast-2.compute.amazonaws.com:81/flight?${queryString}`;
  
  return fetch(endpoint).then((resp) => resp.json());