main
export default function Main() { // 함수 내보내기
const [condition, setCondition] = useState({ // [현재 상태값 변수, 상태 값 갱신해주는 setter 함수] = useState(상태 초기 값)
departure: 'ICN',
});
const [flightList, setFlightList] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const search = ({ departure, destination }) => {
if (
condition.departure !== departure ||
condition.destination !== destination
) {
setCondition({ departure, destination });//갱신 값으로 전달
}
};
useEffect(() => { // condition 값이 바뀔 때마다 특정 작업 실행
setIsLoading(true);
getFlight(condition).then((filtered) => { //then은 처리됨 상태가 된 프로미스를 처리할때 사용.
setFlightList(filtered);
setIsLoading(false);
});
}, [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>
<img id="logo" alt="logo" src="codestates-logo.png" />
</main>
</div>
);
}FlightDateApi.js
if (typeof window !== 'undefined') {// 웹 페이지를 렌더링 할때에 초기에는 window나 document 전역객체는 선언되지 않기 때문에 에러방지
localStorage.setItem('flight', JSON.stringify(flightList)); //setItem('key', 'value') ,, JSON.stringify( )는 자바스크립트의 값을 JSON 문자열로 변환한다.
}
/*
export function getFlight(filterBy = {}) {
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);
});
}
*/
export function getFlight(filterBy = {}) { // 목적지, 도착지 여부 확인후 데이터를 저장해 url에 사용
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 new Promise((resolve) => {
// const request = fetch(endpoint).then((resp) => resp.json());
// setTimeout(() => {
// resolve(request);
// }, 1000);
// });
return fetch(endpoint).then((resp) => resp.json());
} //fetch 매서드는 JavaScript에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 매서드이다.
Search.js
function Search({ onSearch }) { //onSearch 를 props로 받음
const [textDestination, setTextDestination] = useState('');
const handleSearchButton = () => {
const departure = 'ICN';
const destination = textDestination === '' ? null : textDestination; // 도착지가 같거나 공백이 아니라면 props값 전달
onSearch({
departure,
destination,
});
};
const handleChange = (e) => {
setTextDestination(e.target.value.toUpperCase()); // 대문자로 값 전달
};
const handleKeyDown = (e) => {
if (e.type === 'keydown' && e.code === 'Enter') {
handleSearchButton();
}
};
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={handleSearchButton}>
검색
</button>
</fieldset>
);
}
export default Search;
매일 뭐든하기