TIL. 33 React - fetch 함수를 통한 API 호출

💡 fetch 함수

웹 구현중 API를 실행할 때 서버에 데이터를 요청하는데, 문제가 하나 있다. 서버에 데이터를 보내달라는 요청을 하게되면 그 데이터를 다 받아오기도 전에 화면에 표시하려고 해 오류가 발생한다.

• fetch(URL, option)

  • API를 사용하여 백엔드 서버와 Asynchronous(비동기) 요청을 하는 방식 중 하나이며, 기본적으로 첫 번째 인자(URL)와 두 번째 인자(option)를 받고 Promise 타입 객체를 반환한다.

• Asynchronous(비동기) 어떤 코드를 실행할 때, 실행이 완료되는 것을 기다리지 않고 바로 다음 코드를 수행하게되는 JavaScript의 특성이다.

• methos fetch의 메소드 중 GET은 데이터를 단방향으로 받을 때 사용하며, POST는 서버와 통신하며 서로 주고 받을 때 사용한다.

• componentDidMount() 기본적인 리액트 Lifecycle은 바로 render 함수를 실행하도록 되어 있다. 하지만 이 함수를 쓰게 되면, render보다 우선시되어 먼저 데이터를 받아야할 때 사용할 수 있다.

  componentDidMount() {
    fetch("data.json", {
      method: "GET",
    })
      .then((response) => response.json())
      .then((data) => {
        this.setState({
          aList: data,
        });
      });
  }

  // 위 내용은 data.json의 데이터를 받아 aList라는 공간에 setState한다는 의미이다.