24.09.04 json-server / axios 세팅 / json-server, axios GET,POST

json-server 세팅

1. 라이브러리 설치

yarn add json-server

 

2. root 위치에 db.json 파일 생성

 

3. db.json에 데이터 테이블 생성

{
    "todos": [
        {
            "id": 1,
            "title": "json-server",
            "content": "json-server배우기"
        }
    ]
}

 

4. json-server 구동

yarn json-server db.json --port 4000

로컬 4000번 포트로 json server 구동

 

---

axios 세팅

 

1. axios 설치

yarn add axios

 

2. axios 사용

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

const App = () => {
    const [post, setPost] = useState(null);
    useEffect(() => {
        const fetchPost = async () => {
            try {
                const response = await axios("https://jsonplaceholder.typicode.com/todos/1");
                const json = await response.json();
                setPost(json);
            } catch (error) {
                console.log("error :>> ", error);
            }
        };
        fetchPost();
    }, []);

    console.log("post :>> ", post);

    return (
        <div>
            <h3>async / await 연습</h3>
            {post ? <div>{post.title}</div> : <div>Loading...</div>}
        </div>
    );
};

export default App;

axios는 이전에 json()메서드를 사용해서 promise형태를 데이터 형태로 바꾸는 작업이 필요가 없다.

try {
    const response = await axios("https://jsonplaceholder.typicode.com/todos/1");
    setPost(response);
} catch (error) {
    console.log("error :>> ", error);
}

따라서 fetch를 axios로 바꾸고, await를 사용해 받아온 데이터를 그대로 넣어주면 올바르게 들어간다.

---

json-server 와 axios를 사용하여 데이터 통신하기

라이브러리를 사용할 땐 항상 공식문서를 확인하여 올바른 사용법을 확인하도록 한다.

json-server 문서 / axios 문서 

 

json-server와 axios에서는 get요청을 아래와 같이 하도록 안내하고 있다.

 

try {
    const response = await axios.get("http://localhost:4000/todos/1");
    setTodo(response);
} catch (error) {
    console.log("error :>> ", error);
}

공식문서에서 안내한대로 json server의 특정 id값을 가진 todos배열에서 데이터를 get해오며, axios에서 안내한대로 get요청을 axios.get으로 실행하고 있다.

우리가 여기서 필요한 것은 data가 제일 필요한 것이고, 때에따라 status와 statusText도 받아 처리를 진행할 수도 있다.

해당 내용은 개발자도구의 네트워크 탭에서도 확인 가능하다.

const [todos, setTodo] = useState(null);
useEffect(() => {
    const fetchPost = async () => {
        try {
            const { data } = await axios.get("http://localhost:4000/todos/1");
            setTodo(data);
        } catch (error) {
            console.log("error :>> ", error);
        }
    };
    fetchPost();
}, []);

console.log("post :>> ", todos);

---

post요청

 

post요청또한 각 공식문서에서 사용법을 알려주고 있다.

 

const onSubmitHandler = async (todo) => {
    await axios.post("http://localhost:4000/todos", todo);
};

공식문서의 사용법에 따라 작성한 post요청 함수이다.

 

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

const App = () => {
    const [todos, setTodos] = useState(null);
    const [todo, setTodo] = useState({
        title: "",
    });

    const onSubmitHandler = async (todo) => {
        await axios.post("http://localhost:4000/todos", todo).then(({ data }) => setTodos([...todos, data]));
    };

    useEffect(() => {
        //fetchPost
    }, []);

    console.log("post :>> ", todos);

    return (
        <div>
            <h3>async / await 연습</h3>
            <form
                onSubmit={(e) => {
                    e.preventDefault();
                    onSubmitHandler(todo);
                }}
            >
                <input type="text" onChange={(e) => setTodo({ ...todo, title: e.target.value })} />
                <button type="submit">추가하기</button>
            </form>
            //...
        </div>
    );
};

export default App;

input에 값을 입력하고 버튼을 눌러 post요청을 보내면 아래와 같은 데이터를 클라이언트에게 보내준다.

리렌더링이 유발되어야 바로 확인이 가능하므로 .then메서드를 사용하여 res값의 data를 todos배열에 넣어주어 리렌더링을 유발하였다.