1. axios 라이브러리 설치
npm install axios
or
yarn add axios2. 기본적인 axios 설정
백엔드와의 통신을 위한 기본 설정을 정의한다.
예를 들어, api.js라는 파일을 만들어 axios 인스턴스를 설정한다.
// src/api.js
import axios from 'axios';
const instance = axios.create({
baseURL: 'http://your-backend-url.com', // API 서버의 기본 URL
timeout: 1000, // 요청 타임아웃 시간 설정
headers: {'X-Custom-Header': 'foobar'}
});
export default instance;
3. API 요청 만들기
axios 인스턴스를 사용하여 GET, POST, PUT, DELETE 요청을 간단하게 만들 수 있다.
로그인 기능을 구현한 예시이다.
// src/api/auth.js
import instance from './api';
export const loginKakao = async (accessToken) => {
try {
const response = await instance.post(
'/login/kakao',
{},
{
headers: {
'Authorization': `Bearer ${accessToken}`
}
}
);
return response.data;
} catch (error) {
console.error('Error logging in with Kakao:', error);
throw error;
}
};
4. 컴포넌트에서 사용하기
React Native 컴포넌트에서 axios를 사용하여 API 요청을 보낼 수 있다.
// src/components/LoginPage.js
import React, { useState, useEffect } from 'react';
import { View, Button, Text } from 'react-native';
import { loginKakao } from '../api/auth';
const LoginPage = () => {
const [accessToken, setAccessToken] = useState(null);
const [errorMessage, setErrorMessage] = useState('');
useEffect(() => {
// 예시: 액세스 토큰을 얻고 나서 로그인 요청 보내기
if (accessToken) {
loginKakao(accessToken)
.then(data => {
console.log('Login successful!', data);
// 로그인 성공 후 처리
})
.catch(error => {
setErrorMessage('로그인 실패');
});
}
}, [accessToken]);
const handleLogin = () => {
// 예시: 카카오 로그인 버튼 클릭 시 액세스 토큰 설정
setAccessToken('example_access_token');
};
return (
<View>
<Button title="Login with Kakao" onPress={handleLogin} />
{errorMessage ? <Text>{errorMessage}</Text> : null}
</View>
);
};
export default LoginPage;
프론트에서 요청을 보내면 서버에서는 요청을 받고 프론트로 다시 응답을 주게 되는데
프론트에서는 주로 fetch() 함수를 통해 요청을 보내게 되고
백에서 데이터를 응답으로 주면 프론트에서는 그 데이터를 갖고 화면에 띄워주는 구조이다.
