StatesAirline Client - Part 1

비트·2023년 5월 30일
0

CodeStates

목록 보기
36/54
post-thumbnail

Part 1: 항공권 목록 필터링

Main 컴포넌트에서 항공편을 조회

✅ 초기값
⚡ Main.js 부분

import Head from 'next/head';
import { useEffect, useState } from 'react';
import { getFlight } from '../api/FlightDataApi';
import FlightList from './component/FlightList';
import LoadingIndicator from './component/LoadingIndicator';
import Search from './component/Search';
import Debug from './component/Debug';
// 후반 테스트를 진행할 때 아래 import를 삭제합니다.
import json from '../resource/flightList';

export default function Main() {
  // 항공편 검색 조건을 담고 있는 상태
  const [condition, setCondition] = useState({
    departure: 'ICN',
  });
  const [flightList, setFlightList] = useState(json);

  // 주어진 검색 키워드에 따라 condition 상태를 변경시켜주는 함수
  const search = ({ departure, destination }) => {
    if (
      condition.departure !== departure ||
      condition.destination !== destination
    ) {
      console.log('condition 상태를 변경시킵니다');

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

  const filterByCondition = (flight) => {
    let pass = true;
    if (condition.departure) {
      pass = pass && flight.departure === condition.departure;
    }
    if (condition.destination) {
      pass = pass && flight.destination === condition.destination;
    }
    return pass;
  };

  global.search = search; // 실행에는 전혀 지장이 없지만, 테스트를 위해 필요한 코드입니다. 이 코드는 지우지 마세요!

  // TODO: Effeck Hook을 이용해 AJAX 요청을 보내보세요.
  // TODO: 더불어, 네트워크 요청이 진행됨을 보여주는 로딩 컴포넌트(<LoadingIndicator/>)를 제공해보세요.
  // useEffect(() => {

  // }, [])

  // TODO: 테스트 케이스의 지시에 따라 search 함수를 Search 컴포넌트로 내려주세요.
  return (
    <div>
      <Head>
        <title>States Airline</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main>
        <h1>여행가고 싶을 땐, States Airline</h1>
        <Search />
        <div className="table">
          <div className="row-header">
            <div className="col">출발</div>
            <div className="col">도착</div>
            <div className="col">출발 시각</div>
            <div className="col">도착 시각</div>
            <div className="col"></div>
          </div>
          <FlightList list={flightList.filter(filterByCondition)} />
        </div>

        <div className="debug-area">
          <Debug condition={condition} />
        </div>
        <img id="logo" alt="logo" src="codestates-logo.png" />
      </main>
    </div>
  );
}

1. Main 컴포넌트 내 search 함수는 검색 조건을 담고 있는 상태 객체 condition을 업데이트

✅ 해설
⚡ Main.js 부분

// 주어진 검색 키워드에 따라 condition 상태를 변경시켜주는 함수
  const search = ({ departure, destination }) => {
    if (
      condition.departure !== departure ||
      condition.destination !== destination
    ) {
      console.log('condition 상태를 변경시킵니다');

      // 문제
      // search 함수가 전달 받아온 '항공편 검색 조건' 인자를 'condition' 상태에 적절하게 담아보세요.
      setCondition({ departure, destination })
      
      // 풀이
      // const [state 저장 변수, state 갱신 함수] = useState(상태 초기 값); 를 기억하자!
      // 따라서 'setCondition' : 'condition'을 변경하는 함수.

      // 위에 state인 ['condition', 'setCondition'] 부분에 'state 갱신 함수'인 setCondition을 이용해서,
      // 'search' 함수가 전달 받아온 '항공편 검색 조건' 인자를 넣어 줌.
    }
  };



Search 컴포넌트를 통해 상태 끌어올리기

✅ 초기값
⚡ Search.js 부분

import { useState } from 'react';

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

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

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

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

    // TODO: 지시에 따라 상위 컴포넌트에서 props를 받아서 실행시켜 보세요.
  };

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

export default Search;

1. 검색 화면이 Search 컴포넌트로 분리하기

✅ 해설
⚡ Main.js 부분

<main>
  <h1>여행가고 싶을 땐, States Airline</h1>

  {/* 문제 */}
  {/* 검색 화면이 'Search' 컴포넌트로 분리되어야 합니다 */}
  <Search onSearch={search} />
  {/* 풀이 */}
  {/* 'Search' 컴포넌트로 'search'인 상태 변경 함수를 내려주어야하기 때문에  */}
  {/* 'onSearch' props로 전달해준다 */}
  
   
  <div className="table">
    <div className="row-header">
      <div className="col">출발</div>
      <div className="col">도착</div>
      <div className="col">출발 시각</div>
      <div className="col">도착 시각</div>
      <div className="col"></div>
    </div>
    <FlightList list={flightList.filter(filterByCondition)} />
  </div>
     
  <div className="debug-area">
    <Debug condition={condition} />
  </div>
  <img id="logo" alt="logo" src="codestates-logo.png" />
</main>

2. Search 컴포넌트에는 상태 변경 함수 searchonSearch props로 전달하기

✅ 해설
⚡ Search.js 부분

// 문제 
// Search 컴포넌트에는 상태 변경 함수 `search`가 `onSearch` props로 전달되어야 합니다
function Search({ onSearch }) { 
  
// 풀이
// 'onSearch'를  props로 전달.

3. 상태 변경 함수 search는 Search 컴포넌트의 검색 버튼 클릭 시 실행

✅ 해설
⚡ Search.js 부분

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

    // 문제
    // 지시에 따라 상위 컴포넌트에서 props를 받아서 실행시켜 보세요.
    // 검색 버튼을 누르거나, 엔터를 치면 search 함수가 실행
    onSearch({ departure: 'ICN', destination: textDestination })
    
    // 풀이
    // Main.js 참조하면 const search = ({ departure, destination })로 객체 형태로 받아오고 있음
    // 따라서, 출발지는 고정.
    // 도착지의 값은 textDestination으로 변경해주면 된다.

  };
profile
Drop the Bit!

0개의 댓글