간단하게 API 불러오기 실습

[ 랜덤 사용자 API 불러오기 ]

초기 세팅

1. yarn create react-app api_practice

2. 파일 구조
   

   • index.js
     import index.css 삭제
   • App.js

fetch를 사용해서 api 불러오기

정답을 보지 않고 앞에서 배운 fetch 문법을 사용해서 api를 console창에만 띄어보는 것을 해봅시다 !

랜덤 사용자를 제공해주는 api

→ **https://randomuser.me/api/**

import React from "react";

function Example() {
  const onClick = () => {
    fetch()
      .then() ....작성해보시죠!
  };
  return (
    <div>
      <h2>fetch를 사용해서 API 불러오기</h2>
      <div>
        <button onClick={onClick}>API 불러오기</button>
      </div>
    </div>
  );
}

export default Example;

• 정답 코드

  import React from "react";
  
  function Example() {
    const onClick = () => {
      fetch("https://randomuser.me/api/")
        .then((response) => response.json())
        .then((response) => console.log(response));
    };
    return (
      <div>
        <h2>fetch를 사용해서 API 불러오기</h2>
        <div>
          <button onClick={onClick}>API 불러오기</button>
        </div>
      </div>
    );
  }
  
  export default Example;

axios를 사용해 api를 불러오기

이번에는 불러오는거 + 브라우저에 불러온 데이터를 띄워보는 거까지 해봅시다!

• state를 사용해서 API로 받아오는 데이터 관리
• axios 문법 사용해 API 불러오기
• 자바스크립트의 값을 JSON 문자열로 변환한다.

시작하기 전에! axios 설치를 진행합니다

yarn add axios

import axios from 'axios'

import React from "react";

function Example2() {
  // state 사용

  const onClick = () => {
    // 여기에서 api를 불러오는 코드 작성!
  };

  return (
    <div>
      <h2>axios를 사용해서 API 불러오기</h2>
      <div>
        <button onClick={onClick}>API 불러오기</button>
      </div>
      {data && (
        <textarea rows={20} value={데이터를 보여주기 위해 들어갈 코드} readOnly={true} />
      )}
    </div>
  );
}

export default Example2;

• 정답 코드

  import React, { useState } from "react";
  import axios from "axios";
  
  //axios 사용 예제
  
  function Example2() {
    const [data, setData] = useState(null);
  
    const onClick = () => {
      axios.get("https://randomuser.me/api/?results=2").then((response) => {
        setData(response.data);
      });
    };
  
    return (
      <div>
        <h2>axios를 사용해서 API 불러오기</h2>
        <div>
          <button onClick={onClick}>API 불러오기</button>
        </div>
        {data && (
          <textarea rows={20} value={JSON.stringify(data)} readOnly={true} />
        )}
      </div>
    );
  }
  
  export default Example2;

  https://randomuser.me/api/?results=n 이런 식으로 n에 숫자를 넣어주면 n명의 데이터를 불러올 수도 있다!
  

[추가] JSON.stringfy()

JSON.stringfy()는 자바스크립트의 값을 JSON 문자열로 변환한다.

여기서 JSON이란?

= JavaScript Object Notation

브라우저와 서버 사이에서 오고 가는 데이터의 형식!

사용 방법

JSON.stringify(value, replacer, space)

• value(필수) : JSON 문자열로 변환할 값

• replacer(선택) : JSON 문자열에 포함시킬 객체의 속성들을 선택하기 위한 옵션. 이 값이 null 이거나 제공되지 않으면, 객체의 모든 속성들이 JSON 문자열 결과에 포함

• space(선택) : JSON 문자열 출력 공백

  • string : 해당 문자열이 공백으로 사용 (최대 10글자)
  • number : 공백의 갯수 (최대 10개)

  위에서 우리는 api로 받아온 데이터를 보여주기 위해서 데이터를 문자열로 변환해 준 것!