이번시간에는 State끌어올리기를 통해 부모자식간에 값을 전달하고 api를 사용하여, 기능을 구현하는 것을 해보았다.
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 json from '../resource/flightList'
export default function Main() {
const [condition, setCondition] = useState({
departure: 'ICN'
})
const [flightList, setFlightList] = useState(json)
const [isLoading, setIsLoading] = useState(true)
const search = ({ departure, destination }) => {
if (condition.departure !== departure || condition.destination !== destination) {
console.log('condition 상태를 변경시킵니다')
setCondition({departure:departure, destination:destination})
}
}
useEffect(async() => {
setIsLoading(true)
const res = await getFlight(condition);
setIsLoading(false)
setFlightList(res)
}, [condition])
global.search = search // 실행에는 전혀 지장이 없지만, 테스트를 위해 필요한 코드입니다. 이 코드는 지우지 마세요!
return (
<div>
<Head>
<title>States Airline</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<main>
<h1>
여행가고 싶을 땐, States Airline
</h1>
<Search onSearch={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>
{isLoading?<LoadingIndicator/>:<FlightList list={flightList} />}
</div>
<div className="debug-area">
<Debug condition={condition} />
</div>
</main>
</div>
)
}Search.js
import { useState } from 'react'
function Search() {
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 = (props) => {
console.log('검색 버튼을 누르거나, 엔터를 치면 search 함수가 실행됩니다')
props.onSearch({destination:textDestination});
}
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 중 하나를 입력하세요" onKeyPress={handleKeyPress} />
<button id="search-btn" onClick={handleSearchClick}>검색</button>
</fieldset>
}
export default SearchFlightDataApi.js
import flightList from '../resource/flightList'
import fetch from 'node-fetch'
if (typeof window !== "undefined") {
localStorage.setItem('flight', JSON.stringify(flightList));
}
export function getFlight(filterBy = {}) {
return fetch(`http://ec2-13-124-90-231.ap-northeast-2.compute.amazonaws.com:81/flight?departure=ICN&destination=${filterBy.destination}`)
.then(response => response.json())
/*let json = []
if (typeof window !== "undefined") {
json = localStorage.getItem("flight");
}
const flight = JSON.parse(json) || [];
return new Promise((resolve) => {
const filtered = flight.filter((flight) => {
let condition = true;
if (filterBy.departure) {
condition = condition && flight.departure === filterBy.departure
}
if (filterBy.destination) {
condition = condition && flight.destination === filterBy.destination
}
return condition;
})
setTimeout(() => {
resolve(filtered)
}, 500);
});*/
}fetch api를 이용하여 엔드포인트 값을 반환하였고, search는 props로 Search컴포넌트로 전달되었다. 또한 검색 조건을 담는 condition객체를 업데이트 하였고, condition이 바뀔 때 마다 getFlight를 같이 요청하여 그 결과를 받아 flightList상태를 업데이트 하였다. 또한 삼항 연산자를 이용하여 isLoading값이 참이면 LoadingIndicator컴포넌트를 출력하고 그렇지 않으면 flightList를 출력하는 것을 구현하였다.
블로그를 매번 작성하며 느끼는 것이지만 블로그를 작성함으로써 이해가 가지 않던 부분이 이해가 가고 작성하기 어려웠던 부분들도 작성할 수 있게 되는 장점이 있는 것 같다. 확실히 예습보단 복습이다.
Study.log