[React/리액트] API 연동하기
CRA로 프로젝트 폴더를 생성하고, API를 호출하기 위해서 axios 라는 라이브러리를 설치해준다.
npx create-react-app api-integrate
cd api-integrate
yarn add axiosaxios를 사용해서 GET, PUT, POST, DELETE 등의 메서드로 API 요청을 할 수 있다. (REST API)
API요청을 하면 Promise를 반환한다.
⭐ REST API란?
간단하게, 클라이언트와 서버가 소통하는 방식을 말한다.
소통하는 방식은 여러가지 형태가 있는데, 이를 HTTP 메서드라는 것을 사용해서 구분을 한다.
이 중에 HTTP 메서드는 대표적으로 GET, POST, PUT, DELETE 가 있다.
REST API를 사용할 때는 하고 싶은 작업에 따라 다른 메서드로 요청을 할 수 있는데 다음과 같은 의미를 지닌다.
- GET: 데이터 조회
- POST: 데이터 등록
- PUT: 데이터 수정
- DELETE: 데이터 제거
참고로 이 메서드 이외에도 PATCH, HEAD 와 같은 메서드들도 있다.
axios 사용법
import axios from 'axios';
axios.get('/users/1');get 이 위치한 자리에는 메서드 이름을 소문자로 넣고, 파라미터에는 API의 주소를 넣는다.
예) 새로운 데이터를 등록 - axios.post()
axios.post() 로 데이터를 등록 할 때에는 두번째 파라미터에 등록하고자 하는 정보를 넣을 수 있다.
axios.post('/users', {
username: 'blabla',
name: 'blabla'
});
API 연동 연습
JSONPlaceholder 에 있는 연습용 API를 이용하여 API 연동 실습을 해볼 것이다.
👉연습용 API 주소: https://jsonplaceholder.typicode.com/users
1. useState와 useEffect로 데이터 로딩하기
API를 요청하는 가장 기본적인 방법은 useState와 useEffect로 데이터를 로딩하는 것이다.
API요청에 대한 상태를 관리할 때는 총 3가지 상태를 관리해주어야 한다.
- 요청의 결과
- 로딩 상태
- 에러
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 함수 두번째 파라미터에 빈 배열
// 컴포넌트가 처음 렌더링 될 때 fetchUsers 함수가 렌더링 됨.
useEffect(() => {
const fetchUsers = async () => {
try {
// users, error 값을 초기화 시키고, loading 값을 true로 바꿈.
setUsers(null);
setError(null);
setLoading(true);
const response = await axios.get(
"http://jsonplaceholder.typicode.com/users/"
);
setUsers(response.data); // 요청이 성공하면 users 값을 요청에서 받아온 데이터로 바꿔줌
} catch (e) {
setError(e); // 에러가 나면 에러값을 바꿈.
}
setLoading(false); // 로딩이 끝났음을 알림.
};
fetchUsers();
}, []);
// users, loading, error 3가지 상태에 따라 다른 결과물을 반환하도록 설정
if (loading) return <div>로딩중..</div>;
if (error) return <div>에러가 발생했습니다</div>;
if (!users) return null; // users 값이 유효하지 않을 때 안보여지도록
return (
<ul>
{users.map((user) => (
<li key={user.id}>
{user.username} ({user.name})
</li>
))}
</ul>
);
}
export default Users;*참고로 useEffect 에 첫번째 파라미터로 등록하는 함수에는 async 를 사용할 수 없기 때문에 함수 내부에서 async 를 사용하는 새로운 함수를 선언헤주어야 한다.
이 때 catch에 아래와 같은 코드를 추가해서 에러 발생 시에 status code 에러를 확인할 수 있다.
예) 404: 오타 / 401: 인증 실패 / 400: 루트가 잘못됨 등..
catch (e) {
console.log(e.response.status);
}
버튼을 누르면 users 를 다시 불러오도록(새로고침) 생성
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 {
// users, error 값을 초기화 시키고, loading 값을 true로 바꿈.
setUsers(null);
setError(null);
setLoading(true);
const response = await axios.get(
"http://jsonplaceholder.typicode.com/users/"
);
setUsers(response.data); // 요청이 성공하면 users 값을 요청에서 받아온 데이터로 바꿔줌
} catch (e) {
setError(e); // 에러가 나면 에러값을 바꿈.
}
setLoading(false); // 로딩이 끝났음을 알림.
};
// 컴포넌트가 처음 렌더링될 때 실행될 작업: useEffect 함수 두번째 파라미터에 빈 배열
// 컴포넌트가 처음 렌더링 될 때 fetchUsers 함수가 렌더링 됨.
useEffect(() => {
fetchUsers();
}, []);
// users, loading, error 3가지 상태에 따라 다른 결과물을 반환하도록 설정
if (loading) return <div>로딩중..</div>;
if (error) return <div>에러가 발생했습니다</div>;
if (!users) return null; // users 값이 유효하지 않을 때 안보여지도록
return (
<>
<ul>
{users.map((user) => (
<li key={user.id}>
{user.username} ({user.name})
</li>
))}
</ul>
<button onClick={fetchUsers}>다시 불러오기</button>
</>
);
}
export default Users;