21. Axios와 API 연동
1. Axios란?
Axios는 서버(API)와 데이터를 주고받기 위한 JavaScript 라이브러리입니다.
React는 화면(UI)을 만드는 역할을 하고, 실제 데이터는 서버에서 가져오는 경우가 많습니다.
예를 들어
공지사항
예약 목록
회원 정보
게시판
로그인
등은 대부분 Axios를 이용하여 서버와 통신합니다.
2. API란?
API(Application Programming Interface)는 프로그램끼리 데이터를 주고받는 통로입니다.
예를 들어 동부산CC에서는
React
↓
API
↓
PHP
↓
MySQL
순으로 데이터를 가져옵니다.
3. Axios 설치
설치
npm install axios
설치 후
package.json
에 axios가 추가됩니다.
4. Axios 가져오기
import axios from "axios";
5. GET 요청
데이터 조회
axios.get("/api/course");
또는
axios.get(
"http://localhost/api/course.php"
);
6. useEffect와 함께 사용
React에서는
컴포넌트가 실행될 때
데이터를 가져옵니다.
useEffect(()=>{
axios.get("/api/course")
.then((res)=>{
console.log(
res.data
);
});
},[]);
7. useState 저장
const [courses,setCourses]
=
useState([]);
데이터 저장
axios.get("/api/course")
.then((res)=>{
setCourses(
res.data
);
});
8. 화면 출력
{
courses.map((course)=>(
<CourseCard
key={course.id}
course={course}
/>
))
}
React는 서버에서 받은 데이터를 화면에 출력합니다.
9. POST 요청
예약 저장
axios.post(
"/api/reservation",
form
);
React
↓
PHP
↓
MySQL
예약이 저장됩니다.
10. PUT 요청
예약 수정
axios.put(
"/api/reservation/1",
form
);
11. DELETE 요청
예약 삭제
axios.delete(
"/api/reservation/1"
);
12. async / await
실무에서는
많이 사용하는 방식입니다.
const loadCourse=async()=>{
const res=
await axios.get(
"/api/course"
);
setCourses(
res.data
);
}
13. useEffect에서 호출
useEffect(()=>{
loadCourse();
},[]);
페이지가 열리면
자동으로 데이터를 가져옵니다.
14. 동부산CC 예제
공지사항
React
↓
Axios
↓
notice.php
↓
MySQL
↓
화면 출력
예약
Reservation.jsx
↓
Axios
↓
reservation.php
↓
MySQL
↓
예약 완료
15. 에러 처리
try{
const res=
await axios.get(
"/api/course"
);
}
catch(error){
console.log(error);
}
또는
axios
.get(...)
.catch(error=>{
console.log(error);
});
16. 로딩 화면
const [loading,setLoading]
=
useState(true);
데이터 완료
setLoading(false);
화면
{
loading
?
<Loading/>
:
<Course/>
}
17. Axios 실행 흐름
React 시작
↓
useEffect
↓
Axios
↓
PHP
↓
MySQL
↓
JSON
↓
State 저장
↓
React 렌더링
18. Axios 장점
서버 통신
JSON 자동 처리
에러 처리
비동기 처리
POST 지원
PUT 지원
DELETE 지원
19. 동부산CC API 구조
React
↓
Axios
↓
PHP
↓
MySQL
↓
JSON
↓
React
이 구조가 실무에서 가장 많이 사용되는 형태 중 하나입니다.
20. Axios를 사용하는 이유
예전에는
fetch()
를 많이 사용했습니다.
현재도 사용 가능하지만,
Axios는
코드가 간결하고
응답 처리가 편하며
에러 처리가 쉬워
React 프로젝트에서 널리 사용됩니다.
정리
Axios는 React에서 서버와 데이터를 주고받기 위한 라이브러리입니다.
주요 기능은 다음과 같습니다.
GET : 조회
POST : 등록
PUT : 수정
DELETE : 삭제
React에서는 useEffect와 함께 데이터를 불러오고, useState에 저장한 뒤 map()을 이용해 화면에 출력하는 패턴을 가장 많이 사용합니다.
동부산CC 프로젝트에서는 코스 목록, 공지사항, 예약 정보, 회원 정보 등을 Axios를 통해 PHP 또는 Node.js 서버와 통신하여 MySQL 데이터베이스와 연결할 수 있습니다.
1. Axios란?
Axios는 서버(API)와 데이터를 주고받기 위한 JavaScript 라이브러리입니다.
React는 화면(UI)을 만드는 역할을 하고, 실제 데이터는 서버에서 가져오는 경우가 많습니다.
예를 들어
공지사항
예약 목록
회원 정보
게시판
로그인
등은 대부분 Axios를 이용하여 서버와 통신합니다.
2. API란?
API(Application Programming Interface)는 프로그램끼리 데이터를 주고받는 통로입니다.
예를 들어 동부산CC에서는
React
↓
API
↓
PHP
↓
MySQL
순으로 데이터를 가져옵니다.
3. Axios 설치
설치
npm install axios
설치 후
package.json
에 axios가 추가됩니다.
4. Axios 가져오기
import axios from "axios";
5. GET 요청
데이터 조회
axios.get("/api/course");
또는
axios.get(
"http://localhost/api/course.php"
);
6. useEffect와 함께 사용
React에서는
컴포넌트가 실행될 때
데이터를 가져옵니다.
useEffect(()=>{
axios.get("/api/course")
.then((res)=>{
console.log(
res.data
);
});
},[]);
7. useState 저장
const [courses,setCourses]
=
useState([]);
데이터 저장
axios.get("/api/course")
.then((res)=>{
setCourses(
res.data
);
});
8. 화면 출력
{
courses.map((course)=>(
<CourseCard
key={course.id}
course={course}
/>
))
}
React는 서버에서 받은 데이터를 화면에 출력합니다.
9. POST 요청
예약 저장
axios.post(
"/api/reservation",
form
);
React
↓
PHP
↓
MySQL
예약이 저장됩니다.
10. PUT 요청
예약 수정
axios.put(
"/api/reservation/1",
form
);
11. DELETE 요청
예약 삭제
axios.delete(
"/api/reservation/1"
);
12. async / await
실무에서는
많이 사용하는 방식입니다.
const loadCourse=async()=>{
const res=
await axios.get(
"/api/course"
);
setCourses(
res.data
);
}
13. useEffect에서 호출
useEffect(()=>{
loadCourse();
},[]);
페이지가 열리면
자동으로 데이터를 가져옵니다.
14. 동부산CC 예제
공지사항
React
↓
Axios
↓
notice.php
↓
MySQL
↓
화면 출력
예약
Reservation.jsx
↓
Axios
↓
reservation.php
↓
MySQL
↓
예약 완료
15. 에러 처리
try{
const res=
await axios.get(
"/api/course"
);
}
catch(error){
console.log(error);
}
또는
axios
.get(...)
.catch(error=>{
console.log(error);
});
16. 로딩 화면
const [loading,setLoading]
=
useState(true);
데이터 완료
setLoading(false);
화면
{
loading
?
<Loading/>
:
<Course/>
}
17. Axios 실행 흐름
React 시작
↓
useEffect
↓
Axios
↓
PHP
↓
MySQL
↓
JSON
↓
State 저장
↓
React 렌더링
18. Axios 장점
서버 통신
JSON 자동 처리
에러 처리
비동기 처리
POST 지원
PUT 지원
DELETE 지원
19. 동부산CC API 구조
React
↓
Axios
↓
PHP
↓
MySQL
↓
JSON
↓
React
이 구조가 실무에서 가장 많이 사용되는 형태 중 하나입니다.
20. Axios를 사용하는 이유
예전에는
fetch()
를 많이 사용했습니다.
현재도 사용 가능하지만,
Axios는
코드가 간결하고
응답 처리가 편하며
에러 처리가 쉬워
React 프로젝트에서 널리 사용됩니다.
정리
Axios는 React에서 서버와 데이터를 주고받기 위한 라이브러리입니다.
주요 기능은 다음과 같습니다.
GET : 조회
POST : 등록
PUT : 수정
DELETE : 삭제
React에서는 useEffect와 함께 데이터를 불러오고, useState에 저장한 뒤 map()을 이용해 화면에 출력하는 패턴을 가장 많이 사용합니다.
동부산CC 프로젝트에서는 코스 목록, 공지사항, 예약 정보, 회원 정보 등을 Axios를 통해 PHP 또는 Node.js 서버와 통신하여 MySQL 데이터베이스와 연결할 수 있습니다.
#21. Axios와 API 연동