🌐 Axios 기초 정리 (React 기반 REST API 통신)

---

✅ 1. Axios란?

• React.js에서 주로 사용되는 REST API 비동기 통신 라이브러리
• fetch()보다 간결하고 직관적인 문법 제공
• HTTP 요청(GET, POST, PUT, DELETE 등)을 쉽게 처리할 수 있음

---

✅ 2. 설치 방법

📌 npm을 이용한 설치

npm install axios

💡 설치 전 React 서버를 종료하고, 최상위 폴더에서 설치하는 것이 좋음

---

✅ 3. import 방식

import axios from 'axios';

---

✅ 4. 기본 사용법

📌 GET 요청

const response = await axios.get("https://jsonplaceholder.typicode.com/posts");
console.log(response.data);   // 실제 데이터
console.log(response.status); // HTTP 상태 코드

📌 GET 요청 + QueryString

const response = await axios.get("https://jsonplaceholder.typicode.com/comments?postId=1");

📌 POST 요청

const obj = { title: "test", body: "testContent", userId: 1 };
const response = await axios.post("https://jsonplaceholder.typicode.com/posts", obj);

📌 PUT 요청

const obj = { id: 1, title: "updated", body: "updatedContent", userId: 1 };
const response = await axios.put("https://jsonplaceholder.typicode.com/posts/1", obj);

📌 DELETE 요청

const response = await axios.delete("https://jsonplaceholder.typicode.com/posts/1");

---

✅ 5. 예제 컴포넌트

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

export default function AxiosExample() {
    const [count, setCount] = useState(0);

    const onAxiosGet = async () => {
        const response = await axios.get("https://jsonplaceholder.typicode.com/posts");
        console.log(response);
    };

    const onAxiosPost = async () => {
        const obj = { title: "test", body: "testContent", userId: 1 };
        const response = await axios.post("https://jsonplaceholder.typicode.com/posts", obj);
        console.log(response);
    };

    const onAxiosPut = async () => {
        const obj = { id: 1, title: "updated", body: "updatedContent", userId: 1 };
        const response = await axios.put("https://jsonplaceholder.typicode.com/posts/1", obj);
        console.log(response);
    };

    const onAxiosDelete = async () => {
        const response = await axios.delete("https://jsonplaceholder.typicode.com/posts/1");
        console.log(response);
    };

    return (
        <>
            <h2>Axios 예제</h2>
            <button onClick={onAxiosGet}>GET 요청</button>
            <button onClick={onAxiosPost}>POST 요청</button>
            <button onClick={onAxiosPut}>PUT 요청</button>
            <button onClick={onAxiosDelete}>DELETE 요청</button>
        </>
    );
}

---

✅ 6. CORS 오류 해결

📌 오류 예시

Access to XMLHttpRequest at 'http://localhost:8080/board' from origin 'http://localhost:5173' has been blocked by CORS policy

📌 해결 방법 (Spring Controller)

@CrossOrigin(value = "http://localhost:5173")
@RestController
public class BoardController {
    // ...
}

💡 CORS(Cross-Origin Resource Sharing)는 서로 다른 서버 간의 요청/응답을 허용하기 위한 정책입니다.