2/3 일일정리 StatesAirline Client

HTTP요청, useState, useEffect 실습으로 페어와 함께 StatesAirline Client 과제를 진행하였다.

기본적으로 모든 항공 리스트가 나타나고, 검색창에 도착지를 검색하고 검색 버튼을 누를 때 도착지가 일치하는 항공 리스트만 출력이 되도록 컴포넌트를 구성하는 과제였다.

 

getFlight 함수 구현

기존에는 파일 내부에 있는 더미 데이터를 가져와서 화면에 렌더링 하는 것이었는데, 며칠동안 배운 Rest API 와 fetch 함수를 이용하여 서버에서 데이터를 가져오고, query parameter를 이용하여 서버에서 데이터를 가져올 때 필요한 데이터만 가져올 수 있도록 getFlight 함수를 구현하는것이 주요 목표였다.

 

getFlight함수를 사용하여 Ajax 요청의 경우 side effect가 발생하기 때문에 useEffect 함수 내부에서 불러와야 한다.

위 코드는 다음과 같이 실행이 된다.

⓵ 검색 버튼을 누르면 condition 변수가 바뀐다. condition 변수에는 객체로 출발지와 도착지 검색데이터가 들어간다.

     condition 변수가 바뀌었기 때문에 useEffect내부의 함수가 실행된다.

⓶ 검색 데이터인 condition을 인자로 getFlight함수를 부른다.

⓷ getFlight 함수에서 fetch를 사용하여 Ajax 요청을 한다.

⓸ 받아온 데이터를 setFligthList 함수로 flightList 함수에 할당한다.

⓹ 그러면 flightList 상태가 바뀌므로 FlightList 컴포넌트가 다시 렌더링 된다.

 

기본 구성은 끝났으니 getFlight 함수를 구현하기만 하면 된다.

처음에는 모든 항공 데이터를 받아와서 구현되어 있는 filter함수를 사용하여 필터링을 한 후 필터링된 데이터를 넘겨줬다.

이렇게 필터링을 해도 되지만, 그렇게 되면 검색버튼을 누를 때 마다 서버에서 모든 데이터를 받아 온 후

필터링을 하여 렌더링을 하기 때문에 불필요한 데이터를 서버로부터 계속해서 받아오게 되는 단점이 있었다.

 

따라서 GET 요청을 할 때 query parameter를 활용하여 검색 데이터를 기반으로 필요한 데이터만 요청할 수 있도록 코드를 구성 해 보았다.

이번 과제에서 출발지는 고정이었기 때문에 query parameter를 출발지까지는 고정으로 넣어주고,

queryParams 변수에 도착지 query parameter를 설정해 주고 도착지 데이터가 있으면 endpoint에 queryParams까지 붙여서 fetch요청을 하고, 도착지 데이터가 없으면 그냥 출발지 query까지인 endpoint변수를 fetch로 불러서 데이터를 받아왔다.

 

이렇게 하면 매번 불필요한 데이터를 불러 올 필요 없이 필터링 된 데이터만 불러와 렌더링을 할 수 있었다.

 

로딩 화면 구현

네트워크 요청이 느릴 때 렌더링 할 로딩 화면을 구현해 보았다.

먼저 로딩 중일때는 true, 로딩이 완료되면 false를 가지는 state를 만들었다.

위에서 본 useEffect 내부에서 getFlight 함수로 데이터를 요청하는데, 요청 하는 동안 로딩화면이 뜨도록 isLoading을 true로 설정해주고, getFlight함수가 완료되면 다시 isLoading에 false를 할당하도록 useEffect를 수정하였다.

 

그리고 렌더링 하는 부분에 삼항 연산자로 isLoading이 ture일 때는 로딩화면을 렌더링하고, isLoading이 false면 FlightList를 보여주도록 코드를 작성했다.

 

로딩 중일 때는 다음과 같은 화면이 출력된다.

로딩 중인 화면