이제 HTTP 요청을
클라이언트 쪽 프로젝트에 여러가지 방법으로 보낼 수 있습니다
예를 들어, 내장 fetch 함수를 사용할 수 있습니다
이 함수는 리액트가 제공하는 것은 아니고
브라우저가 직접 제공하는 것입니다
그리고 fetch는 어떤 함수냐면
HTTP 요청을 다른 서버들로 보내는데 사용합니다
이제 보이는 이름과는 다르게
데이터를 fetch할 때만 사용하지는 않습니다
데이터를 보낼 때도 사용하기는 하지만, 그건 나중에 다루겠습니다
일단 아주 기본적으로, fetch가 원하는 건
요청을 보내려는 서버의 URL입니다
제가 제공한 이 프로젝트에서는
http://localhost 3000 입니다
콜론으로 구분되어 있습니다
이 URL이 실행 중인 백엔드 서버를 목표로 할 것입니다
그리고 이 /places 경로가 있는데
그 places 데이터를 돌려받고
백엔드의 파일에 저장하는 경로입니다
그러니 여기 /places를 추가해야 합니다
이제 바로, 이 URL로 get 요청을 보낼 것입니다
딱 지금 우리에게 필요한 것입니다
이제 fetch는 프로미스(Promise)를 반환합니다
그건 자바스크립트 값으로
나중에 다른 값에 사용됩니다
이건 기본적으로 값을 감싸는 객체이며
아직은 없지만
곧 생길 것입니다
이런 경우, 이 부분은
받은 Response 객체를 감쌉니다
그러니까 프로미스는 표준 자바 객체이며
해당 상태에 따라
각 다른 값을 산출해냅니다
그리고 그 값들에 접근하려면
fetch를 불러온 결과로 메소드들을 한데 묶을 수 있습니다
예를 들어 then 메소드를 추가할 수 있는데
그리고 then 메소드에 함수를 전달하여 함수를 정의하면
이 프로미스가 해결되고 Response를 받고 나서
한 번 실행됩니다
그리고 이 함수에는 자동으로
Response 객체를 받습니다
하지만 then에 전달하려는 이 함수는
Response를 받고 나서
브라우저를 통해 딱 한 번 실행됩니다
그러니 즉각적인 과정은 아닙니다
최신 자바에서는 이 await 키워드를 사용해서
이 Reponses들에 접근할 수 있습니다
구문도 더 가독성 있게 만들어 줍니다
하지만 이게 가능한 건 오직 이 함수에서
이 코드가 비동기(async)로 실행될 때입니다
하지만 한편으론
컴포넌트 함수들에게는 허용되지 않습니다
리액트가 지정한 제약입니다
그래서 여기서 비동기 await을 사용할 수 없습니다
하지만 곧 다른 곳에서 사용하겠습니다
일단 여기서는 다른 표기법으로 돌아가 보겠습니다
이건 response를 받으면 잘 작동합니다
그리고 response를 받고 나서 어떤 코드가 실행되야 하는지
정의할 수 있습니다
이 fetch 함수를 쓸 땐
이 response 객체는 response의 일부인 데이터를
접근할 수 있는
다른 메소드들이 있습니다
예를 들어, JS 메소드가 있습니다
JSON 형식의 데이터를 추출하는데 사용할 수 있습니다
JSON은 간단하게 텍스트 기반 데이터 형식이며
이 places.json 파일 안에 있는 것처럼 생겼습니다
이런 식으로 생겼고
자바의 배열과 객체와 비슷하다고 볼 수 있습니다
하지만 모든 키들이 따옴표로 감싸져 있습니다
JSON의 특징 중 하나이며
사실상 표준(de facto standard) 데이터 형식입니다
백엔드와 데이터를 주고 받을 때 사용합니다
이 JSON 메소드는 또 다른 프로미스를 반환합니다
그래서 여기 JSON을 반환하면
첫 번째 then 다음에 또다른 then 메소드를 추가할 수 있습니다
response 데이터를 돌려받고
그 데이터로 작업하기 위함입니다
각 불러온 then을 어떻게 한데 묶는지 배워봤습니다
그리고 여기 최종 response 데이터가 있습니다
이 경우, 이 임시 API가 객체가 되어야 하고
places 키를 가지고 있으니 이제 places 데이터도 있습니다
이 availablePlaces 배열입니다
이제 여기서 resData.places에 접근할 수 있습니다
이 임시 API가
이 availablePlaces 배열에 접근합니다
그리고 이제 setAvailablePlaces를 불러와서
그 데이터를 전달해줍니다
하지만 여기 이 코드는 크나큰 문제와 결함이 있습니다
바로 무한 루프를 생성한다는 것인데요
이런 식으로 fetch를
컴포넌트 함수에 직접적으로 불러오면
이 코드는 당연하게도
이 컴포넌트 함수가 실행될 때마다 실행됩니다
그러니 새로운 요청이
이 컴포넌트 함수가 실행될 때마다 보내집니다
문제는 두 번째 then 블록에서
상태를 업데이트하는데
그러면 이 컴포넌트 함수를
또 실행하게 합니다
이렇게 되면 새로운 요청과, 새로운 상태 업데이트
또 다시 실행된 후, 또 새 요청과 새 상태 업데이트
이렇게 무한 반복되는 것입니다
그러니 이런 식으로 요청을 보내서는 안 됩니다
하지만 부수 효과 섹션을 배우셨다면
이 문제가 여러분에게 익숙하실 것입니다
그리고 그 섹션을 잘 들었다면
해결책에 대해서도 알고 있을 겁니다
바로 useEffect를 사용해 이 코드를 감싸면
무한 루프를 방지할 수 있습니다