[ React ] React 기본 ⑤ React에서 API 호출하기

[ useEffect를 이용하여 컴포넌트 Mount 시점에 API를 호출하고 해당 API의 결과값을 일기 데이터의

초기값으로 이용하기 ]

 

자바스크립트 API 호출 내장 함수인 fetch를 사용해서 API를 호출하고, 응답 데이터를 App 컴포넌트가

가지고 있는 일기 데이터인 data state에서 일기 데이터의 초기값을 설정한다.

 

무료로 API 데이터를 제공해서 테스트를 할 수 있게 도와주는 JSONPlaceholder 서버스를 사용한다.

https://jsonplaceholder.typicode.com/

JSONPlaceholder - Free Fake REST API

 

Resources 탭은 어떤 API 서비스로 자원을 가져다 쓸 수 있는지 리스팅을 해놓는다.

/comments 등을 눌러서 들어가보면 JSON 형태로 생긴 객체 배열을 확인할 수 있다. 

 

API를 호출하기 위해서는 API의 주소를 알아야한다. 주소는 탭을 클릭한 URL이고 그 URL을 복사해서 가져오면 된다.

 

---

[ API를 호출하는 함수 생성하기 ]

 

자바스크립트 API 내장 함수 fetch를 이용한다.

* fetch() : 자바스크립트에서 API 호출을 할 수 있도록 도와주는 내장함수 ( promise 객체를 반환 )

→ promise를 반환하는 함수는 비동기 처리를 하는 함수이고, 이 함수의 처리 결과는 then을 통해서 사용할 수 있다.

fetch를 사용해서 API를 호출하게 되면 API 결과값을 그대로 반환하는 것이 아니라 API 성공 객체 자체를 반환한다.

 

* promise 객체 : new 키워드를 사용해서 promise 객체를 생성한다. 객체의 생성자로 비동기 함수를 실행하는 함수를

넘겨준다면 전달되는 순간 바로 함수가 실행이 된다. 함수가 promise를 반환한다는 것은 그 함수는 비동기 작업을

하고, 그 작업의 결과를 promise 객체로 반환받아서 사용할 수 있는 함수라는 의미이다. 

 

getData 함수가 promise 객체를 반환하는 비동기 함수를 만들기 위해 async 키워드를 사용한다. 

 

* async : 비동기를 다루는 기능이자 함수 앞에 붙여줄 경우 그 함수는 promise를 반환한다.

promise 객체를 리턴하는 비동기 처리 함수에 then를 사용하게 된다면 res에 반환하는 값인 문자열이 들어오게 된다.

* await : 비동기 함수를 동기적으로 처리하게 만드는 키워드

→ await를 비동기 함수 앞에 붙여주게 된다면 비동기 함수가 동기적인 함수처럼 작동하게 된다. 즉, await 키워드가

붙은 함수의 호출은 그 함수가 끝나기 전까지 함수 코드 밑에 있는 부분을 실행하지 않는다. await이 존재하는

코드는 모두 동기적으로 수행을 하게 되고 await 키워드는 반드시 async 키워드가 붙은 함수 내에서만 사용 가능하다.

 

  const getData = async () => {
    const res = await fetch("https://jsonplaceholder.typicode.com/comments").then((res)=>res.json());
  };

 

위 코드를 통해 원하는 json 값들을 뽑아올 수 있다. getData()는 App 컴포넌트가 mount 되는 순간에 호출한다. 

useEffect()의 dependency array에 빈배열을 전달한다면 App 컴포넌트가 mount 되는 순간에 바로 실행하게 되고,

useEffect의 콜백함수로 getData()를 전달해주면 된다. 

 

const getData = async () => {
    const res = await fetch(
      "https://jsonplaceholder.typicode.com/comments"
    ).then((res) => res.json());
    console.log(res);
  };

  useEffect(() => {
    getData();
  }, []);

 

 

리액트를 실행해서 콘솔을 확인해보면 호출한 JSONPlaceholder의 comments 리소스를 받아온 것을 확인할 수 있다.

 

---

[ getData()에서 res 상수에 저장된 값을 통해서 일기 데이터의 기초값을 설정해보기 ]

 

받아온 comments 리소스중 slice 메소드를 통해 index가 0부터 19까지 총 20개의 프로퍼티를 받아오고,

map 함수를 통해 배열을 순회한다. 

 

20개의 프로퍼티에 대해서 각 요소를 지정해준다. 

 

const getData = async () => {
    const res = await fetch(
      "https://jsonplaceholder.typicode.com/comments"
    ).then((res) => res.json());

    const initData = res.slice(0, 20).map((it) => {
      return {
        author: it.email,
        content: it.body,
        emotion: Math.floor(Math.random() * 5) + 1,
        created_date: new Date().getTime(),
        id: dataId.current++, // id를 current 값으로 저장하고 ++를 통해 1을 더한다.
      };
    });
    setData(initData);
  };

  useEffect(() => {
    getData();
  }, []);

 

* 수학 연산 객체인 Math를 사용해서 랜덤값 생성하기

emotion: Math.floor(Math.random() * 5) + 1,

 

Math.random()*5는 0~4까지의 랜덤 난수를 생성하게 되고, 기본적으로 정수가 반환되지 않기 때문에 Math.floor를 

통해서 소수점 자리를 더 버려주는 정수로 바꿔주는 함수를 사용한다. 감정효과는 1~5까지이기 때문에 1을 더해준다.

 

그러면 App 컴포넌트가 mount 되는 순간에 setData(initData)를 통해 일기 데이터의 초기값을 생성해줄 수 있다.

 

시작하자마자 확인할 수 있는 페이지