useEffect훅을 사용해 과제를 풀어보았다.

 

✅ 검색 조건이 바뀔 때마다, FlightDataApi의 getFlight를 검색 조건과 함께 요청해야 합니다

✅ getFlight의 결과를 받아, flightList 상태를 업데이트해야 합니다

✅ 더이상, 컴포넌트 내 필터 함수 `filterByCondition`를 사용하지 않습니다

 

우선  FlightDataApi에 담긴 getFlight 함수를 사용하는것은

react 컴포넌트와 관련이 없는 동작이므로 Side Effect라고 볼 수 있다.

useEffect 훅을 사용하여 Side Effect를 관리를 해준다.

 

useEffect는 함수와 배열을 인자로 받는데

함수에는 side effect를

배열에는 종속성 배열 즉 변화를 감지할 상태값을 넣어주면된다.

 

여기서 condition은 항공권을 조회할때 출발지와 도착지의 상태를 의미하는 변수이므로

condition의 상태가 바뀔때마다 첫번째 인자의 함수가 실행이된다.

 

getFlight의 함수는 하나의 인자를 받아 항공권 리스트를 필터링 해주는데

이때의 인자는 출,도착지 상태인 condition을 인자로 넣어준다.

---

✅ getFlight 요청이 다소 느리므로, 로딩 상태에 따라 LoadingIndicator 컴포넌트를 표시해야 합니다

 

LoadingIndicator 컴포넌트는 이미 구현이 되어있었고

상태값을 주어서 필터링된 항공편 목록을 보여주는 함수 실행전에는(여기서는 일부러 delay 0.5초를 주었음)

로딩화면을 보여주고 setIsLoading (true)

실행이 완료되어 응답결과를 받아 항공권 목록 상태 변화 함수에 결과를 출력해 준 후에는

목록화면이 보여지도록 setIsLoading (false) 한다.

 

이를 삼항연상자로 표현한다면 이미지와 같다.

---

✅  검색 조건과 함께 StatesAirline 서버에서 항공편 정보를 요청(fetch)합니다

useEffect를 이용해서 condition의 상태값이 변할때마다 함수를 호출을 해야한다.

이 함수는 fetch API를 사용해서 서버에 AJAX 요청을 수행한다.

 

getFlight(condition)은 출, 도착지 정보를 가진 객체 condition을 인자로 실행되는 함수이다.

 

fetch함수의 인자로는 주어진 url이 들어가는데 이때

출,도착 정보에 따라 다른 url을 넣어주어야 한다.

 

보통 url은 길고 복잡하므로 변수에 할당해준다고 한다.

 

그리고 사용자가 출발지(인천으로 고정)만 지정시 모든 목록이 출력되어야하며

아니라면 도착지가 포함된 목록이 출력되어야 한다.

 

이를 삼항연산자로 표현해 변수에 할당해주고(승현넴 짱짱맨)

 

fetch함수에 위에서 만들어줬던 조건값을 인자로 넣어주고

response로 반환된 값을 json함수를 이용해서 사용할 수 있는 데이터로 만들어준다.

이때 처음에 return 을 써주는 것을 빼먹어서 오류가 났었다

다시 useEffect로 돌아와서

getFlight함수에서 전달받은 프로미스형태의 결과값을

.then 메소드로 받아 항공편 목록 상태변화함수에 인자로 전달해준다.

 

 

💡만났던 오류

위와같이 완벽하게 코드를 작성하고 어플리케이션을 실행시켜봤는데

아무리 목적지를 입력해도 결과목록이 없다고 떴었다.

 

그렇다는 뜻은 항공권 목록을 보여주는 함수인 FlightList는 실행이 잘 된다는 뜻인데

도착지입력에 문제가 있다는것으로 해석했다.

 

이번에 작성한 코드는 완벽했고

이전에 작성한 코드들을 따라가다보니...

지금은 고친 상태지만 onSearch의 인자로들어가는 곳에 departure: "ICN"을 해주지 않았었다........🥲

과거의 나,...^^

사실 input value가"ICN"로 고정되어있음에도 불구하고 onSearch 함수를 실행할 때 인자에 명시해주지 않으면

이전에 더미데이터에서 데이터를 들고올때와는 달리 의도된대로 동작하지 않는다.