카테고리 없음
React에서 API 호출하기: Axios를 활용한 예제
riversun1
2024. 6. 12. 22:37
React 애플리케이션에서 백엔드 서버와의 통신은 자주 발생합니다.
React 애플리케이션에서 API를 호출하는 방법에 대해 알아보겠습니다.
우리는 Axios 라이브러리를 사용하여 백엔드 서버에 HTTP 요청을 보내고 응답을 처리할 것입니다.
Axios 소개
Axios는 JavaScript 및 TypeScript를 위한 강력한 HTTP 클라이언트 라이브러리입니다. 우리는 이 라이브러리를 사용하여 간편하게 서버에 요청을 보내고 응답을 처리할 수 있습니다.
yarn add axios
예제: React 애플리케이션에서 Axios 사용하기
아래의 예제를 통해 Axios를 사용하여 React 애플리케이션에서 서버 API를 호출하는 방법을 살펴볼 것입니다.
import React, { useState } from 'react';
import axios from 'axios';
const API_URL = "https://moneyfulpublicpolicy.co.kr";
const App = () => {
const [userData, setUserData] = useState(null);
// 회원가입 함수
const signup = async () => {
try {
const response = await axios.post(`${API_URL}/signup`, {
username: 'example_user',
password: 'example_password',
email: 'example@email.com'
});
console.log("회원가입 결과:", response.data);
} catch (error) {
console.error("회원가입 에러:", error);
}
};
// 로그인 함수
const login = async () => {
try {
const response = await axios.post(`${API_URL}/login`, {
username: 'example_user',
password: 'example_password'
});
console.log("로그인 결과:", response.data);
const token = response.data.token;
// 로그인 성공 시 토큰 저장 및 회원정보 확인
getUserInfo(token);
} catch (error) {
console.error("로그인 에러:", error);
}
};
// 회원정보 확인 함수
const getUserInfo = async (token) => {
try {
const response = await axios.get(`${API_URL}/user_info`, {
headers: {
Authorization: `Bearer ${token}`
}
});
console.log("회원정보 확인 결과:", response.data);
setUserData(response.data);
} catch (error) {
console.error("회원정보 확인 에러:", error);
}
};
// 회원가입 및 로그인 버튼 클릭 핸들러
const handleButtonClick = async () => {
await signup();
await login();
};
return (
<div>
<h1>API 호출 예제</h1>
<button onClick={handleButtonClick}>회원가입 및 로그인</button>
{userData && (
<div>
<h2>회원정보</h2>
<p>Username: {userData.username}</p>
<p>Email: {userData.email}</p>
</div>
)}
</div>
);
};
export default App;
위 예제는 React 함수형 컴포넌트를 사용하여 작성되었습니다.
useState 훅을 사용하여 회원정보를 상태로 관리합니다.
Axios를 사용하여 회원가입, 로그인 및 회원정보 확인을 수행하는 함수들을 작성합니다.