04 API와 Axios 1

POST

import React, { useState } from "react";
import axios from "axios";

function Users() {
  let [result, setResult] = useState("");

  // 삽입할 데이터 객체를 선언하세요.
  const login = { email: "eve.holt@reqres.in", password: "cityslicka" };
  // axios.post를 호출하고 result에 반환되는 토큰 값을 저장하세요.
  axios
    .post("https://reqres.in/api/login", login)
    .then((response) => setResult(response.data.token));

  return (
    <div>
      <h4>React Axios로 HTTP POST 요청하기</h4>
      <div>Token: {result}</div>
    </div>
  );
}

export default Users;

GET

import React, { useState, useEffect } from "react";
import axios from "axios";

function Users() {
  let [result, setResult] = useState("");
  // useEffect를 사용하지 않고 아래를 출력해보세요.
  // console.log(result);

  // axios.get을 호출하고 result에 반환되는 데이터를 저장하세요.
  useEffect(() => {
    axios
      .get("https://reqres.in/api/users/2")
      .then((response) => setResult(response.data.data));
  }, []);
  return (
    <div>
      <h4>React Axios로 HTTP GET 요청하기</h4>
      <div>
        {/* result를 이용해 출력 결과와 동일하게 출력하세요. */}
        Name: {result.first_name + " " + result.last_name} <br />
        Email: {result.email} <br />
      </div>
    </div>
  );
}

export default Users;

PUT

import React, { useEffect, useState } from "react";
import axios from "axios";

function Users() {

  let [result, setResult] = useState("");
  
  // 수정할 데이터를 선언하세요.
  const updateData = {
    first_name: "White",
    last_name: "Rabbit",
    email: "alice@elice.io",
  };
  //  axios.put을 호출하고 result에 반환되는 사용자 데이터를 저장하세요.
  useEffect(() => {
    axios
      .put("https://reqres.in/api/users/2", updateData)
      .then((response) => setResult(response.data));
  }, []);
  return (
    <div>
      <h4>React Axios로 HTTP PUT 요청하기</h4>
      <div>
        Name: {result.first_name + " " + result.last_name} <br />
        Email: {result.email} <br />
        Update Date: {result.updatedAt} <br />
      </div>
    </div>
  );
}
export default Users;

DELETE

import React, { useState } from "react";
import axios from "axios";

function Users() {
  let [result, setResult] = useState("");

  // axios.delete를 호출하고 result에 반환되는 HTTP 상태 코드를 저장하세요.
  axios
    .delete("https://reqres.in/api/users/2")
    .then((response) => setResult(response.status));

  return (
    <div>
      <h4>React Axios로 HTTP DELETE 요청하기</h4>
      <div>
        {/* result를 이용해 출력 결과와 동일하게 출력하세요. */}
        Status: {result} <br />
      </div>
    </div>
  );
}

export default Users;