React 에서 axios 사용하기 !

axios란 ?

React에서 AJAX를 사용하기 위해 사용되는 HTTP Client 라이브러리입니다.

세팅하기

우선 터미널 창에 

yarn add axios

를 입력해서 axios 라이브러리를 설치해줍니다.

 

axios를 사용할 파일에 

import axios from 'axios';

입력하면 됩니다.

사용하기

App.js

import axios from 'axios'
import data from './data/data';

function App() {
  return (
    <div>
      <button onClick ={() =>{
        axios.get('https://jsonplaceholder.typicode.com/users')
        .then(()=>{
          console.log('success')
        })
        .catch(()=>{
          console.log('fail')
        })
      }}>불러오기</button>
    </div>
  );
}

export default App;

App.js를 이렇게 구성해줬습니다.

 

https://jsonplaceholder.typicode.com/

JSONPlaceholder - Free Fake REST API

이 사이트를 통해서 여러 데이터를 접할 수 있습니다. 연습용으로 좋은 것 같습니다.

 

axios에 대해서 설명드리자면 

axios.get('데이터를 불러올 URL') 을 하게되면 URL에서 데이터를 가져오게 됩니다.

 

.then 뒤 에는 데이터를 불러오기 성공했을때 실행시킬 문장을 작성하고

.catch 뒤에는데이터를 불러오기 실패했을때 실행시킬 문장을 작성하면 됩니다.

이것이 기본적인 axios 사용 방법입니다.

 

React Hook과 axios 같이 사용하기

https://react.vlpt.us/integrate-api/

4장. API 연동하기 · GitBook

이 곳을 참고했습니다.

useState 와 useEffect 로 데이터 로딩하기

useState 를 사용해 상태를 관리하고,

useEffect 를 이용해 렌더링 되는 시점에 요청을 시작하는 작업을 해보겠습니다.

요청에 대한 상태를 관리 할때 3가지 상태를 관리해 주어야합니다.

1. 요청의 결과
2. 로딩 상태
3. 에러

Users.js 라는 새로운 파일을 만들고 코드를 작성해줍니다.

Users.js

import React, {useState, useEffect} from 'react'
import axios from 'axios'

function Users() {
    const [users,setUsers] = useState(null)
    const [loading,setLoading] = useState(false)
    const [error,setError] = useState(null)

    //요청결과 , 로딩상태, 에러

    useEffect(() => {
        const fetchUsers = async () => {
            try{
                setError(null)
                setUsers(null)
                setLoading(true)
                const response = await axios.get(
                    'https://jsonplaceholder.typicode.com/users'
                    )
                setUsers(response.data) //response.data 안에 데이터가 존재
            }
            catch (e) {
                setError(e)
            }
            setLoading(false)
            //로딩이 끝!
        }
        fetchUsers()
    }, [])

    if (loading) return <div> 로딩중 ... </div>
		//로딩중일때
    if (error) return <div> 에러가 발생! </div>
		//에러가 날때
    if (!users) return null
		//데이터를 불러오지 않았을때
    return (
        <ul>
            {users.map(user => (
                <li key={user.id}>
                    {user.username} ({user.name})
										
                </li>
            ))}
        </ul>
    )
}

export default Users

 

버튼을 새로 만들어줘서 새로고침이 가능하도록 만들어 보겠습니다.

Users.js

import React, {useState, useEffect} from 'react'
import axios from 'axios'

function Users() {
    const [users,setUsers] = useState(null)
    const [loading,setLoading] = useState(false)
    const [error,setError] = useState(null)

    //요청결과 , 로딩상태, 에러

const fetchUsers = async () => {
    try{
        setError(null)
        setUsers(null)
        setLoading(true)
        const response = await axios.get(
            'https://jsonplaceholder.typicode.com/users'
            )
        setUsers(response.data) //response.data 안에 데이터가 존재
    }
    catch (e) {
        setError(e)
    }
    setLoading(false)
    //로딩이 끝!
}
useEffect (() =>{
    fetchUsers()

}, [])

    if (loading) return <div> 로딩중 ... </div>
		//로딩중일때
    if (error) return <div> 에러가 발생! </div>
		//에러가 날때
    if (!users) return null
		//데이터를 불러오지 않았을때
    return (
        <ul>
            {users.map(user => (
                <li key={user.id}>
                    {user.username} ({user.name})
                <button onClick={fetchUsers}>다시 불러오기 </button>

                </li>
            ))}
        </ul>
    )
}

export default Users

useEffect()를 밖으로 따로 빼주면 fetchUsers라는 함수를 사용할 수 있게됩니다.

그 후 버튼에 onClick이벤트를 전달해 줍니다.

 

감사합니다.