이제 성공적으로 데이터를 가져오고 있습니다
하지만 데이터를 가져오는 이 fetch 코드는 더 개선될 수 있습니다
우선 여기서 쓰인 then 블록들은 잘 작동하고
가독성이 좋지만
대다수의 사람들은 비동기(async) await 구문을 선호합니다
제가 전에 잠깐 언급했었는데, 여기서도 사용할 수 있습니다
useEffect를 사용할 때 하지 말아야 할 것은
동기(sync) 키워드를 여기 추가하고
await를 여기서 사용하려는 겁니다
보시다시피 이미 프로젝트에서 경고를 받고 있습니다
이건 리액트가 허용하지 않거나
지원하지 않는 것이라는 뜻입니다
대신, async await를 사용하기 위해 할 수 있는 건
이 Effect 함수에서
새로운 함수를 생성하는 것입니다
왜냐하면 당연하게도 자바에서는
함수 안에서 함수를 생성할 수 있기 때문입니다
fetchPlaces라고 이름을 지어보도록 하겠습니다
그리고 여기에 비동기를 추가합니다
왜냐하면 이 함수는 여러분이 정의한 것이 때문에
리액트가 사용할 수 있는 방법은
특별하게 없습니다
이 코드를 가지고 fetch 요청을 보내고
이걸 await하면 결과적으로
response를 돌려받습니다
그리고 다음 단계로
response.json을 await함으로 response 데이터를 받을 수 있습니다
그리고 마지막 단계로는 전에 했던 것처럼 places를 설정합니다
그리고 이 코드는 다 지워주겠습니다
그리고 이 코드는 물론
조금 더 가독성이 있고 구조를 갖추었습니다
이제 주의해야할 건
fetchPlaces가 실행되느냐 입니다
지금은 아무 일도 일어나지 않고 있기 때문입니다
그래서 아직 Effect 함수 안에 있습니다
하지만 fetchPlaces의 밖에서
이런 식으로 fetchPlaces를 불러와야 합니다
그러니까 정의를 하고 즉시 불러내는 것입니다
하지만 비동기로 정의하고 사용하면
이 await 키워드를 사용할 수 있습니다
주로 사용되는 괜찮은 방법입니다
이런 식으로 async await을 Effect 함수에서 사용할 수 있습니다
그리고 이제 저장을 하면
이전처럼 데이터를 잘 가져오는 것이 확인됩니다