Skip to content

fetch API 사용 예시 코드 추가

Eunhak Lee requested to merge impl/fetch-api-example into dev

fetch API 를 사용하는 방법은 다음과 같습니다.

fetch("https://api.coffee.ajou.enak.kr/api/products/1");

그런데 이제 바뀌는 부분은 /products/1 으로 매우 작은 부분이므로 줄여서 쓸 수 있도록 패치를 해놨습니다 (src/main.jsx). 이 프로젝트에 한해서 이렇게 사용할 수 있습니다.

fetch("/products/1");

만약 이 string 안에 일부 부분을 variable 로 두고 싶다면 이렇게 할 수 있습니다.

fetch(`/products/${id}`);  // id 가 포매팅 됨

여기서 이 함수는 비동기 함수입니다. 비동기 함수에 대한 내용을 자세히 다루지는 않겠지만, 간단히 설명하자면 비동기 함수를 실행하는 중간에 interrupt 될 수 있고 그로 인해서 비동기 함수의 종료 시점은 코드 상에서 순차적이지 않습니다. 비동기 함수는 이렇게 서버에서 데이터를 받아오는 등 오랜 시간이 걸리는 작업들에 사용합니다.

그러면 이 fetch 는 이렇게 사용됩니다. 서버에서 데이터를 받아와야 하는 로직은 모두 async function 안에 넣어주세요.

async function fetcher() {
    const response = await fetch(`/products/${id}`);
    const payload = await response.json();  // 이미 json 데이터를 파싱한 상태여서 바로 접근 가능합니다.

    setData(payload.brandName);  // 출력 예시: "A Company Name"
    // or use payload['brandName']
};

fetcher();  // 한 번 실행해줘야 비동기 함수가 시작됩니다. 정의만 하면 시작하지 않습니다.

Merge request reports