React 컴포넌트에서 AJAX

이전포스팅에서 다뤘던 실습과 동일하다. 목록 내 필터링을 구현하기 위해서는 다음과 같은 두가지 접근이 있을 수 있다.

• 컴포넌트 내에서 필터링: 전체 목록 데이터를 불러오고, 목록을 검색어로 filter 하는 방법
• 컴포넌트 외부에서 필터링: 컴포넌트 외부로 API 요청을 할 때에, 필터링한 결과를 받아오는 방법 (보통, 서버에 매번 검색어와 함께 요청하는 경우가 이에 해당한다)

1. 컴포넌트 내에서 필터링

1. 데이터 전부가 담겨있는 flightList 를 처음 단 한번 받아온 다음
2. 내부 컴포넌트에서 flightList의 렌더링 직전에 함수(filterByCondition)로 필터링된 것이다.

2. 컴포넌트 외부에서 필터링

1. fetch API를 통하여 데이터를 받아오든 localStorage에 있는 데이터를 받아오든, 받아올 때 이미 필터링을 거쳐 받아온다.
2. 받아올때마다 필터링을 하려면 필터링의 기준이 되는 어떠한 state를 종속배열로 만들어두고 useEffect함수를 호출하여야 한다.

두 방식은 각각 아래 장단점이 있다

fetch를 이용하여 서버에 AJAX 요청하기

서버의 앤드포인트에다가 추가적인 파라미터(query parameter)를 덧붙여 위에서 말한 외부 필터링이 가능하다.
파라미터는 /flight?departure=ICN&destination=CJU 와 같이 사용할 수 있는데,

/flight?departure=${departure}&destination=${destination}

이렇게 파라미터값을 전달인자를 통하여 받을 수 있게끔 하여 필터링을 구현해보았다.

그리고 받아온 데이터는 response 형태 객체이므로 .json()메소드를 사용하여 promise 객체 형태로 바꿔주어 리턴해주었다.

계속 삽질했던 부분......

producer의 리턴의 형태가 Promise라면,,,
consumer에서 그 값을 빼오려면 .then 이나 async/await로 빼와야 한다.

return new Promise((resolve) => {
    
      setTimeout(() => {
        resolve(filtered)
      }, 500);

    }) //promise 객체의 producer

useEffect(async() => {
    setFlightList(await getFlight(condition))
  }, [condition]); //promise 객체의 consumer. 갇혀있는 promise객체의 성공값을 끌어내준다.

더 공부해봐야 할 것.

• 클라이언트가 서버에 요청을 덜 보내는 방법
• 서버가 클라이언트에게 돌려줄 응답을 캐싱하는 방법