axios (GET, POST)

axios:

1. node.js와 브라우저를 위한

Promise 기반 https 클라이언트

2. http를 이용해서 통신하기 위해 사용하는 패키지

3. fetch와 기능이 겹침

4. response.json() 할 필요가 없음

5. await("url링크");만 해도 됨

6. import axios from 'axios';

 

사용하는 이유
1. fetch API 같은 내장 함수보다 코드가 간결
2. 비동기 요청을 관리하는 데 좋음
3. then()과 catch()`로 쉬운 결과처리 가능
4. 기본 설정 기능: 공통 URL이나 헤더 같은 설정을 쉽게 지정 가능
5. JSON 자동 변환: 서버에서 받은 데이터를 JSON 형태로 쉽게 변환 가능

 

json server
변경 사항이 생기면 터미널을 껐다가 다시 켜줘야 함

 

동기
1. 직관적인 작업 과정
2. 하나의 작업이 마치고 결과가 나온 뒤에 그다음 작업을 실행

비동기
1. 작업이 마치지 않아도 다음 작업이 실행
2. 동시에 여러 요청을 수행
3. JSON으로 전송받는 방식

 

설치 방법
터미널에 yarn add axios 입력

 

import axios from 'axios';

import { useEffect, useState } from 'react';

function App() {

    const [data, setData] = useState(null);

    useEffect(() => {

// 데이터 가져오기

        axios.get('https://api.example.com/data')

// 성공 시 데이터 설정

            .then(response => setData(response.data))

// 에러 시 처리

            .catch(error => console.error(error));

    }, []);

    return (

        <div>

            {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : 'Loading...'}

        </div>

    );

}

export default App;

 

GET

1. 데이터를 조회할 때 사용하는 메서드
2. 서버에서 데이터를 가져오는 것이 목적

↓

import axios from 'axios';

import { useEffect, useState } from 'react';

function App() {

    const [data, setData] = useState(null);

    useEffect(() => {

// 데이터 가져오기

        axios.get('https://api.example.com/data')

     .then(response => {

// 성공 시 데이터 출력

         console.log(response.data);

     })

     .catch(error => {

// 에러 처리

         console.error(error);

     });

    }, []);

    return (

        <div>

            {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : 'Loading...'}

        </div>

    );

}

export default App;

 

POST

1. 서버에 데이터를 보내는 것이 목적

2. 서버에 새로운 데이터를 추가할 때 많이 사용됨

↓

import axios from 'axios';

import { useEffect, useState } from 'react';

function App() {

    const [data, setData] = useState(null);

    useEffect(() => {

// 데이터 가져오기

axios.post('https://api.example.com/data', {

        name: 'John',

        age: 30

    })

    .then(response => {

    // 성공 시 서버 응답 출력

        console.log(response.data);

    })

    .catch(error => {

    // 에러 처리

        console.error(error);

   

     });

    }, []);

    return (

        <div>

            {data ? <pre>{JSON.stringify(data, null, 2)}</pre> : 'Loading...'}

        </div>

    );

}

export default App;