statesairline-client sprint

Main.js

export default function Home() {
  const [condition, setCondition] = useState({
    departure: 'ICN' 
  }) // 현재 select한 검색 설정 목록을 state 설정
  const [flightList, setFlightList] = useState([])
    // 해당 검색에 필터링 된 목록을 [] 배열 안에 넣도록 state 설정
  const [isLoading, setIsLoading] = useState(false)
    // 현재 로딩중인지 state 설정
  const search = ({ departure, destination }) => { 
  //객체속의 departure과 destination을 인자로 받아서
    if (condition.departure !== departure || condition.destination !== 	   destination) {
    //만일 검색 설정 condition의 departure과 departure이 같지 않거나
    검색 설정 condition의 destination과 destination이 같지 않다면
      setCondition({ departure, destination })
      //{departure, destination}으로 condition을 설정해주는 함수 호출
    }
  }

  useEffect(() => { 
    setIsLoading(true) //IsLoading state를 true로 만들어주고 (로딩중!)
    getFlight(condition) 
    //import 해온 getFlight함수에 condition 객체를 넣어 필터링 된 데이터를 받아오고 
      .then(filtered => { // 그 이후 그 받아온 데이터를 FlightList state로 넣어주면서 로딩이 끝났으니 isLoading state도 false로 바꿔줌
        setFlightList(filtered) 
        setIsLoading(false)
      })
  }, [condition]) // condition 의 값이 변경되면 실행됨

  global.search = search

useEffect

렌더링, 혹은 변수의 값 혹은 오브젝트가 달라질 경우
그것을 인지하고 업데이트 해주는 함수
콜백함수를 인자로 받으며
렌더링 또는 값, 오브젝트의 변경에 따라 어떤 함수 혹은 함수들을 동작시킴

1) 페이지가 처음 렌더링 되고 난 후 무조건 처음 실행되며,
2) useEffect에 배열로 지정한 useState의 값이 변경되면 실행됨

FlightDataApi.js

export function getFlight(filterBy = {}) {
 
  const url = `http://ec2-13-124-90-231.ap-northeast-2.compute.amazonaws.com:81/flight? 
  departure=${filterBy.departure}&destination=${filterBy.destination}`;
  //받아올 주소를 설정하되 필터된 departure와 destination을 넣어서 주소를 만듬
  
  return fetch(url) //해당 주소에서 데이터를 받아서
    .then((response) => response.json()) // json화 시키고 
    .then((json) => {
      return json; // 리턴해줌 !
    })


}