API활용, axios (React.js)

API

프론트엔드에서 백엔드에 요청값을 보내면 백엔드에서 그 요청에 대한 응답값을 프론트엔드로 보내는 구조. 대부분은 해당 과정에서 JSON 데이터 타입을 많이 사용한다.

 

 

axios설치

- axios: HTTP 비동기 통신 라이브러리

(React에서)

- 설치

npm -i axios

 

API 연습하기 (Api1.js)

"https://jsonplaceholder.typicode.com/posts"를 통해서 post mapping 실습하기

import axios from 'axios';
import { useState } from 'react';

const Api1 = () => {
    const [data, setData] = useState([]); // state 초기화
    // API 호출 함수
    const callApi = () => {
        axios.get('https://jsonplaceholder.typicode.com/posts').then((res) => {
            console.log(res);
        }); // promise 객체로 return, then을 통해서 활용 가능
    };
    return (
        <>
            <button onClick={callApi}>API 호출</button>
        </>
    );
};
export default Api1;

• 버튼 누르면 개발자 도구에서 다음과 같은 응답을 확인할 수 있음

 

json 데이터에서 특정 값만 가져오기

json 데이터에서 title값만 리스트 형태로 가져오는 코드

        <button onClick={callApi}>API 호출</button>
            <div>
                {/* {JSON.stringify(data)} */}
                <ul>
                    {data.map((d) => (
                        <li key={d.id}>{d.title}</li>
                    ))}
                </ul>
            </div>