그렇다면 이제
sort 원리를 어떻게 적용할 수 있을지 배워봅시다
이 경우에 적용할 수 있는
사용할 수 있는 방법들은 다양합니다
그 중 하나는
여기에 별도의 함수를 만들어서
fetchSortedPlaces라고 이름을 붙여 봅시다
그리고 이것은 비동기 함수여야 합니다
우선 await fetchAvailablePlaces라고 호출해 봅시다
우리가 가져오는 이 함수를 호출하면
장소를 만들어내거나 실패할 경우 오류 창을 띄울 것입니다
그렇게 장소가 결과값으로 나올 것입니다
여기 있는 이 코드를 이 함수로 옮기는 것도 가능합니다
주석 처리를 한 후 상태 업데이트 함수를 없앱니다
그리고 현재 위치를 얻고 나면 여기에 프로미스(promise)를 반환해야 합니다
이를 위해서는
이렇게 새 프로미스 객체를 만들어서
여기에 새로운 프로미스를 반환할 수 있습니다
이 함수는 브라우저에 이미 있는 것입니다
이 프로미스 생성자는 함수를 인수로 인식하고
resolve와 reject 매개변수를
브라우저를 통해 전달합니다
이 함수에서
이 코드를 이제 실행시킬 수 있습니다
그러면 이 Promise 생성자를 통해
사용자의 위치를 불러오게 됩니다
이 코드를 Promise에 넣음으로써
코드를 프로미스 안에 포함시켜
프로미스로 바꾼다는 것입니다
여기서 Promise를 반환하기 위해서는 이 과정이 필요합니다
이렇게 우리가 결괏값을 기다리고 있기 때문에
useFetch는 fetch 함수가 프로미스를 만들어낼 것이라 예상합니다
즉, fetch 함수가 프로미스를 만들어야 하므로
여기에 promise를 제가 입력한 것입니다
그렇다면 여기에 제가 만들고 있는 프로미스가
resolve를 실행하면 값을 내도록 만듭시다
그리고 대기 시간이 끝났고, 값이 나왔으니
이제 fetch 함수를 사용해 봅시다
값이 나오면 Resolve를 실행하도록 하면 됩니다
우리가 장소를 정렬하고 나면 그렇게 될 것입니다
여기에 Resolve를 실행하여 sortedPlaces를 입력합니다
sortedPlaces는 Resolve 함수의 해결된 값입니다
이렇게 하면 우리가 fetchSortedPlaces를 기다리고 있을 때
여기서는 우리가 fetch 함수로
이것을 사용하고 있기 때문에
결국 이 함수로 promise에 의해 반환되는 값은
sortedPlaces의 값입니다
이것은 리액트에서만 할 수 있는 것은 아니고
자바스크립트의 일반적인 함수입니다
자바에서 프로미스가 아닌 함수와 API를
프로미스 기반 함수로 바꾸기 위해
흔히 쓰이는 패턴입니다
그래서 사실은 Reject는
여기서 그렇게 중요하지 않습니다
Promise 안에 오류를 넣고 싶다면 사용할 수는 있지만
이번 시간에는 그냥 넘어가도록 하겠습니다
그럼 이제 이 fetchSortedPlaces 함수가
여기서 데이터를 불러오는 함수로 사용되어야 합니다
fetchSortedPlaces라고 쓰겠습니다
이 함수를 여전히 fetchAvailablePlaces라고 부르지만
이 함수는 거리 기반으로
장소를 정렬하는 작업도 수행하기 때문에
useFetch 훅은 바뀔 필요가 없습니다
여기서는 여전히 fetch 함수가 있고
fetch 함수는 정상적으로 작동하면서도
작업 도중 일어날 수 있는
오류를 모두 잡아냅니다
이 state 값들을 업데이트하는 작업도 수행합니다
이것이 앞에서 제기한 질문에 대한
간단명료한 해결책입니다
그럼 이제 여기서 setFetchedData를 없애겠습니다
이 컴포넌트에서는 별로 필요하지 않기 때문입니다
useState와 useEffect import도 필요하지 않기 때문에
둘 다 없애겠습니다
이렇게 저장하고 새로고침을 누르면
여전히 장소들이 불려 왔고
거리에 따라 장소들이 정렬되어 있습니다
개발자 도구를 확인해보면
오류가 없는 것도 알 수 있습니다
이렇게 정렬도 정상적으로 작동하고
그 전에 구축한 모든 작업들도 정상적으로 작동합니다
이 모든 것은 커스텀 훅을 사용해서 가능한 작업이었습니다