react는 front-end에서 사용하기 때문에 데이터를 모두가 사용할 수 있게 저장할 수 없다는것을 의미하고, 이는 다른 사용자와의 데이터 공유가 이뤄질 수 없음을 의미합니다.
yarn add axios
axios는 REST API에 데이터를 요청할 때 이를 promise로 처리할 수 있게 해주는 라이브러리
HTTP method를 통해 서버와 클라이언트의 통신을 할 경우에 사용해서 상대가 어떤 통신을 요청하는지, 그리고 내가 어떤 통신을 요청해야 하는지 정할 수 있습니다.
axios를 사용해서 GET,PUT,POST,DELETE 등의 메서드로 API 요청을 할수 있습니다.
GET : 데이터 조회
POST : 데이터 등록
PUT : 데이터 수정
DELETE : 데이터 제거
import axios from 'axios';
axios.get('/users/1');
이 경우는 users들 중에 첫번째 user에 대한 정보를 불러와달라는 것을 의미합니다. 물론 첫번째가 아니라 id가 1인 유저가 될 수도 있고 그건 서버가 정해놓은 규칙이라 상황에 따라 다릅니다.
get이 위치한 자리에는 메서드 이름을 소문자로 넣습니다. 예를 들어 새로운 데이터를 등록하고 싶다면 axios.post() 를 사용하면 됩니다.
그리고 파라미터에는 API주소를 넣습니다.
axios.post()로 데이터를 등록할때에는 두번째 파라미터에 등록하고자 하는 정보를 넣을 수 있습니다.
axios.post('/users', {
username: 'blabla',
name: 'blabla'
});
useState 를 사용하여 요청 상태를 관리하고, useEffect 를 사용하여 컴포넌트가 렌더링되는 시점에 요청을 시작하는 작업을 해보겠습니다.
요청에 대한 상태를 관리 할 때에는 다음과 같이 총 3가지 상태를 관리해주어야합니다.
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 {
// 요청이 시작 할 때에는 error 와 users 를 초기화하고
setError(null);
setUsers(null);
// loading 상태를 true 로 바꿉니다.
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;
참고로, useEffect 에 첫번째 파라미터로 등록하는 함수에는 async 를 사용 할 수 없기 때문에 함수 내부에서 async 를 사용하는 새로운 함수를 선언해주어야 합니다.
로딩 상태가 활성화 됐을 땐 로딩중.. 이라는 문구를 보여줬습니다.
그리고, users 값이 아직 없을 때에는 null 을 보여주도록 처리했습니다.
맨 마지막에서는 users 배열을 렌더링하는 작업을 해주었습니다.
이제 이 컴포넌트가 잘 작동하는지 확인해봅시다. App 컴포넌트에서 User 컴포넌트를 렌더링해보세요.
import React from 'react';
import Users from './Users';
function App() {
return <Users />;
}
export default App;