[React] HTTP요청

콜백함수

다른 함수의 인자로 넘겨지고 해당함수가 처리된 후 호출되는 함수

Promise

객체이기때문에 new(생성자함수)로 만듬 인자로 콜백함수를 넣을수있음
어떤 작업을 처리하고 결과를 알려달라고 (약속)
프로미스 객체를 통해 약속의 결과를 받음 
->비동기작업이 완료되면 결과 받음

인자

resolve

첫번째 콜백함수
비동기작업이 정상일 경우 결과값을 전달할 콜백함수
결과값 : .then으로 결과 받음

reject

두번째 콜백함수
비동기작업이 정상아닐 경우 결과값을 전달할 콜백함수
결과값 :.catch으로 결과 받음

결과값 :.finally resolve,reject 상관없이 출력

promise객체는 상태를 갖고있음

pending(대기)
비동기 작업이 처리하는중
fulfilled(이행)
비동기작업 정상처리
rejected(거부)
비동기작업 정상x

async/await

비동기 코드 가독성 향상
async:비동기 작업 처리하는 함수 정의
- 항상 Promise반환
await:async함수 내부에서 Promise처리될때까지 결과를 기다림
요청의 응답이 완료될 때까지는 다음 코드가 실행되지 않고그 응답이 완료되면 해당 응답을 반환하고 다음 코드로 진행
+++ 비동기를 사용한 모든 함수는 Promise 반환

useEffect(() => {
  async function fetchPlaces() {
    const response = await fetch("http://localhost:3000/places"); // 응답을 기다림
    const resData = await response.json(); // JSON 형식의 응답을 파싱하여 변수에 할당
    setAvailablePlaces(resData.places); // 파싱된 데이터로 상태 업데이트
  }

  fetchPlaces(); // async 함수 호출
}, []);

useEffect 안에서 정의된 fetchPlaces 함수는 자동으로 실행되지 않는다.
따라서 코드 실행 흐름상에서 fetchPlaces()를 호출하여 비동기적으로 데이터를 가져오고 상태를 업데이트해야한다.

//Promise를 사용한 코드
useEffect(() => {
  fetch("http://localhost:3000/places")
    .then((response) => {
      return response.json(); // JSON 형식의 응답을 파싱하여 Promise 반환
    })
    .then((resData) => {
      setAvailablePlaces(resData.places); // 파싱된 데이터로 상태 업데이트
    });
}, []);

---

fetch,useEffect

데이터가 준비되면 상태 업데이트
useEffect안쓰면 포넌트 함수가 실행되는 시점에 한 번만 호출되고 있기 때문에 데이터가 한 번만 가져와짐

.json

Fetch API의 Response 객체에 속한 메서드로, 서버에서 받은 HTTP 응답 본문을 JSON으로 파싱합니다. .json()은 응답(Response) 객체에만 사용

JSON.parse()

JavaScript의 전역 함수로, 문자열을 JSON 객체로 파싱
JSON 형식의 문자열을 JavaScript 객체로 변환

JSON.stringify()

JavaScript 객체를 JSON 문자열로 변환
JavaScript 객체를 서버에 전송하기 전에 JSON 문자열로 변환하여 전송하거나, 로컬 스토리지에 데이터를 저장할 때 사용