API 연동하기, axios

일단 axios 를 설치하자

둘중에 하무거나 npm 쓰면 npm yarn 하면 yarn 

npm install axios

yarn add axios

 

설치후 package.json 에 설치가 잘 되어 있는지 확인하자~

 

 

---

 

useState 와 useEffect 로 데이터 로딩

 

요청에 대한 상태를 관리 할 때에는 총 3가지 상태를 관리해 줘야한다

1. 요청의 결과

2. 로딩 상태

3. 에러

 

일단 컴포넌트에 Users.js 생성

 

import React, { useEffect, useState } 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 {
                // 요청 시작시 error 와 users 초기화
                setError(null);
                setUsers(null);
                // loadding 상태를 true 로 변경
                setLoading(true);

                const response = await axios.get(
                    'https://jsonplaceholder.typicode.com/users'
                );
                setUsers(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;

useEffect 에 첫번째 파라미터로 등록하는 함수에는 async 사용 불가임

때문에 함수 내부에서 async 를 사용하는 새로운 함수를 선언 해줘야함

async > 프로미스 반환, 아니것도 프로미스로 감싸줌

await > 프로미스가 처리되기를 기다림

 

결과

잘~ 뜬다 ㅎㅎ

---

일부러 에러내기

 

url 을 아무렇게나 수정하고 결과를 보자

바로 에러 발생했다고 뜬다

---

버튼을 눌러서 API 재요청하기

 

아까 만들었던 fetchUsers 함수를 바깥으로 꺼내주고, 버튼을 만들어서 해당함수를 실행시키게 하면 된다.

 

Users.js

import React, { useEffect, useState } 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 {
                // 요청 시작시 error 와 users 초기화
                setError(null);
                setUsers(null);
                // loadding 상태를 true 로 변경
                setLoading(true);

                const response = await axios.get(
                    'https://jsonplaceholder.typicode.com/users'
                );
                setUsers(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})
                    </li>
                ))}
            </ul>
            <button onClick={fetchUsers}>다시 호출</button>
        </>
    );
    
}

export default Users;

버튼이 생기고 버튼을 누르면 재호출이 된다.

좋아요