[React] Project Levup - Axios 활용하기

백엔드에서 구현한 사항 : 메모 만들기, 메모 조회하기

백엔드에서는 로그인이 완료되면 토큰을 발급하고, 토큰과 함께 메모 조회 요청을 하면 해당 ID로 작성한 메모를 가져오도록 구현했다.

먼저, 메모 뷰가 랜더링 되면 API 요청을 통해 헤더에 토큰을 담아 데이터를 요청한다.

import { useState, useEffect } from 'react'
import {Cookies} from "react-cookie";

const cookie = new Cookies();
    const token = cookie.get("token");
    const [memo, setMemo] = useState([]);

useEffect(() => {
        axios.get("http://127.0.0.1:8000/api/memo", { headers:{
            "Authorization" : token
        }}).then(response => {
            console.log(response.data.data);
            setMemo(response.data.data);
        })
    }, [])

이제 해당 ID로 작성한 메모 데이터가 memo 라는 변수 안에 있으므로

데이터를 순회하며 content 라는 변수에 있는 데이터와 ID 를 찾아 뷰에 표기한다.

return (
        <div>
            <div>
                {memo.map((item, index) => {
                    return (
                        <div key={index}> 
                            {item._id.$oid} {item.content}
                        </div>)
                })}
            </div>
        </div>
    )

 

로직 완성 후 화면을 확인해보자

 

확인한 모습

css는 적용되어있지 않지만, 원하는 데이터가 표현된 것을 볼 수 있다.