[TIL] Day35 #StatesAirline

2022.06.15(Wed)

[TIL] Day35
[SEB FE] Day35

☑️ [Pair] StatesAirline

// Main.js
export default function Main() {
  // 항공편 검색 조건을 담고 있는 상태
  const [condition, setCondition] = useState({});
  
  // 항공편 목록 상태
  const [flightList, setFlightList] = useState([]);
  
  // 
  const [isLoading, setIsLoading] = useState(true);

  // 주어진 검색 키워드에 따라 condition 상태를 변경시켜주는 함수
  const search = ({ departure, destination }) => {
    if (
      condition.departure !== departure ||
      condition.destination !== destination
    ) {
      setCondition({ departure: departure, destination: destination });
      // key&value가 같으므로 setCondition({departure, destination}) 라고 써도 같음
    }
  };

  // condition 상태가 달라질 때 마다 AJAX 요청
  useEffect(() => {
    // 로딩 화면 O
    setIsLoading(true);
    // 응답 성공시 응답에 대한 항공편 목록을 변경하고 로딩화면 X
    getFlight(condition).then((response) => {
      setFlightList(response),
        setIsLoading(false);
    });
  }, [condition]);

  return (
    <div className="container">
      <main>
        <Search
          onSearch={search}
          condition={condition}
          setCondition={setCondition}
        />
        <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>
          {/* 로딩중이면 로딩 화면 컴포넌트를 보여주고 아니면 항공편 목록을 보여줌 */}
          {isLoading ? <LoadingIndicator /> : <FlightList list={flightList} />}
          {/* FlightList 컴포넌트를 보면 list를 props로 받아왔으므로 여기서 list={flightList}로 FlightList에 전달해주는 것 */}
        </div>
      </main>
    </div>
  );
}

// Search.js
function Search({ onSearch, condition, setCondition }) {
  // 출발지 상태
  const [textDeparture, setTextDeparture] = useState("");
  // 도착지 상태
  const [textDestination, setTextDestination] = useState("");

  // 도착지 event handler
  const handleChange = (e) => {
    setTextDestination(e.target.value.toUpperCase());
  };

  // 출발지 event handler
  const handleChange2 = (e) => {
    setTextDeparture(e.target.value.toUpperCase());
  };

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

  const handleSearchClick = () => {
    onSearch({ departure: textDeparture, destination: textDestination });
  };

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

export default Search;

// FlightList.js
function FlightList({ list = [] }) {
  if (list.length === 0) {
    return <div className="merge-col">목록이 없습니다</div>;
  }

  return list.map(
    ({ uuid, departure, destination, departure_times, arrival_times }) => {
      return (
        <Flight
          key={uuid}
          departure={departure}
          destination={destination}
          departureTimes={departure_times}
          arrivalTimes={arrival_times}
        />
      );
    }
  );
}

export default FlightList;

// FlightDataApi.js
import fetch from "node-fetch";

if (typeof window !== "undefined") {
  localStorage.setItem("flight", JSON.stringify(flightList));
}

export function getFlight(filterBy = {}) {
  console.log(filterBy);
  // 출발지 선택을 안하고 콘솔을 찍으면 filterBy에 {departure: "ICN"}이 찍힘
  // 출발지를 선택하고 콘솔을 찍으면 {departure: "ICN", destination: "~"}가 찍힘
  
  // REST API 호출
  // 모든 데이터 정보를 가져옴
  const url = `http://ec2-13-124-90-231.ap-northeast-2.compute.amazonaws.com:81/flight`;

  // 객체의 key
  if (filterBy.destination === undefined) {
    return fetch(url).then((res) => res.json());
  }

  return fetch(
    `${url}?departure=${filterBy.departure}&destination=${filterBy.destination}`
  ).then((res) => res.json());
}

---

☑️ Quiz

➰ Element: React 앱의 가장 작은 단위
➰ Component: 여러 엘리먼트와 함수들이 모여 있는 기능적 단위 (하나의 element)

---

✅ 프로그래머스 Lv.1 Programmers 3문제 풀이(두 정수 사이의 합, 문자열을 정수로 바꾸기, 서울에서 김서방 찾기)
✅ Youtube 별코딩 - useEffect 강의 듣고, 코드 연습
✅ 한입 크기로 잘라 먹는 리액트(React.js) - JS 기본 강의 듣기

Ajax 요청하는 부분 fetch 사용하는 쪽도 어려웠고, 컴포넌트 분리가 되어있어서 여기저기 어디서 어떤 코드를 작성해야 할지 어려웠던.. 처음부터 프로젝트를 시작해보면서 파일 구조와 데이터를 어떤 식으로 주고받는지 연습이 많이 필요할듯 하다.. fetch 사용 부분도 복습복습 🫠