3주차 퀴즈 핑하면 퐁하기!

3주차 내용을 기반으로 핑을 입력하면 퐁하고 alert 를 띄우도록 만들어보자.

•  mock api 만들기 : ~~번 포트로 API 요청을 보내기 위해
• 버튼 만들기
• fetch 나 axios 로 "http://localhost:5001/ping" 으로 get 요청하기
• 버튼 눌러서 확인하기

 

db.json

{
    "ping": { "answer": "pong" }
}

 

App.js

import React from "react";
import axios from "axios";

function App() {
    const callSomethingAxios = () => {
        axios({
            method: "get",
            url: "http://localhost:5001/ping",
        }).then((response) => {
            let answer = response.data.answer;
            alert(answer);
        });
    };

	return (
        <div className="App">
            <button onClick={callSomethingAxios}>요청하기</button>
        </div>
    );
}

export default App;

 

---

fetch 이용한 버전

import React from "react";

function App() {
    const fetchPing = () => {
        fetch("http://localhost:5001/ping", {
            headers: { "Content-Type": "application/json" },
        });
    };
    
    return (
        <div className="App">
            <button onClick={fetchPing}>요청하기</button>
        </div>
    );
}

export default App;

fetch 는 Promise 값을 반환한다. 여기에서 가지고 온 어떤 요청 값을 확인하려면 async await 을 걸어서 확인해주어야 한다.

const fetchPing = async () => {
    const res = await fetch("http://localhost:5001/ping", {
        headers: { "Content-Type": "application/json" },
    });
    console.log(res);
};

확인해보면 res 에 담긴 데이터는 우리가 바로 볼 수 있는 형태의 데이터가 아니다. 이를 바꿔주기 위해서는

👉 json() 이라는 함수를 사용하면 확인할 수 있도록 바꿔줄 수 있다.

console.log(res.json())

json 을 통해 데이터에 접근하니 Promise 가 반환된다.

Promise 를 받아오므로 원하는 데이터를 받아오도록 기다리려면 await 을 써주면 된다!

const data = await res.json();
console.log(data);

이제 원하는 데이터 형태로 뜬다!

완성

import React from "react";

function App() {
    const fetchPing = async () => {
        const res = await fetch("http://localhost:5001/ping", {
            headers: { "Content-Type": "application/json" },
        });
        const data = await res.json();
        window.alert(data.answer);
    };
    
    return (
        <div className="App">
            <button onClick={fetchPing}>요청하기</button>
        </div>
    );
}

export default App;