-
< Main.js >
메인 (부모컴포넌트)에 있는 search함수가 search 컴포넌트 (자식컴포넌트)의 검색 버튼 클릭시 실행되어야 한다상태끌어올리기를 사용
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); // 주어진 검색 키워드에 따라 condition 상태를 변경시켜주는 함수 // search 함수가 전달 받아온 '항공편 검색 조건' 인자를 condition 상태에 담기 const search = ({departure, destination}) => { if (condition.departure !== departure || condition.destination !== destination) { setCondition({departure, destination}); }}; 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; // 테스트를 위해 필요한 코드 // 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> <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> ); }< Search.js >
import {useState} from "react"; 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(); } }; // 상위 컴포넌트에서 props를 받아서 실행 const handleSearchClick = () => { onSearch({departure: "ICN", 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 Search;'코드스테이츠' 카테고리의 다른 글
4.12 재귀 템플릿 작성중 (0) 2023.04.12 재귀 (1) 2023.04.11 3.11 개인복습 (0) 2023.03.11 3.3 JavaScript 클로저 (0) 2023.03.03 3.2 JavaScript 스코프 (0) 2023.03.02