26. React + PHP 연동
1. React + PHP란?
React는 화면(UI)을 담당하고,
PHP는 서버(Server)를 담당합니다.
둘은 API를 통해 데이터를 주고받습니다.
React
↓
Axios
↓
PHP(API)
↓
MySQL
↓
PHP
↓
JSON
↓
React
이 구조는 카페24에서도 많이 사용하는 방식입니다.
2. 역할 분리
React
화면 출력
버튼
입력폼
이벤트
사용자 경험(UI)
PHP
로그인
회원관리
예약관리
게시판
DB 처리
MySQL
데이터 저장
3. 프로젝트 구조
project
frontend
React
backend
PHP
api
login.php
reservation.php
notice.php
member.php
프런트엔드와 백엔드를 분리하면 관리가 쉬워집니다.
4. React 요청
Axios
axios.get(
"http://localhost/api/course.php"
);
또는
axios.post(
"/api/login.php",
form
);
5. PHP 응답
예)
$data = [
"name"=>"동부산CC",
"course"=>"EAST"
];
echo json_encode($data);
React는 JSON 데이터를 받습니다.
6. React 받기
const [course,setCourse]
=
useState({});
axios.get(...)
.then((res)=>{
setCourse(
res.data
);
});
7. 화면 출력
<h2>
{course.name}
</h2>
JSON 데이터가
자동으로 출력됩니다.
8. 예약 등록
React
↓
POST
↓
PHP
↓
MySQL
↓
저장 완료
React
axios.post(
"/api/reservation.php",
form
);
PHP
INSERT INTO reservation(...)
9. 예약 조회
React
↓
GET
↓
PHP
↓
SELECT
↓
MySQL
↓
JSON
↓
React
10. 예약 수정
PUT
↓
PHP
↓
UPDATE
↓
MySQL
11. 예약 삭제
DELETE
↓
PHP
↓
DELETE
↓
MySQL
12. 로그인
React
↓
POST
↓
login.php
↓
MySQL
↓
JWT
↓
React 저장
13. 게시판
게시글 작성
↓
PHP
↓
DB
↓
React
↓
목록 출력
14. 공지사항
notice.php
↓
MySQL
↓
JSON
↓
Notice.jsx
React는
map()으로 출력합니다.
15. 갤러리
gallery.php
↓
이미지 목록
↓
React
↓
Gallery
16. 관리자 페이지
React
↓
Axios
↓
admin.php
↓
DB
↓
회원관리
↓
예약관리
↓
공지관리
17. CORS
개발 중에는
localhost:5173
↓
localhost/api
처럼 서로 다른 주소를 사용할 수 있습니다.
이 경우 PHP에서 CORS 허용 설정이 필요합니다.
예)
header(
"Access-Control-Allow-Origin: *"
);
실제 서비스에서는 허용 대상을 필요한 도메인으로 제한하는 것이 좋습니다.
18. 동부산CC 전체 구조
React
↓
Axios
↓
PHP(API)
↓
MySQL
↓
JSON
↓
React
모든 기능이
이 구조입니다.
19. 실무 프로젝트 구조
React
↓
로그인
↓
예약
↓
게시판
↓
갤러리
↓
문의
↓
PHP
↓
MySQL
20. React + PHP 장점
✔ PHP 재사용 가능
✔ 카페24 사용 가능
✔ MySQL 그대로 사용
✔ React UI 적용
✔ 유지보수 쉬움
✔ 실무 활용 가능
21. 동부산CC 기능 연결 예시
React 페이지 PHP API MySQL
Login.jsx login.php member
Reservation.jsx reservation.php reservation
Notice.jsx notice.php notice
Gallery.jsx gallery.php gallery
MyPage.jsx member.php member
Admin.jsx admin.php reservation, notice, member
22. 개발 순서
Figma
↓
React 화면 제작
↓
Axios 연결
↓
PHP API 제작
↓
MySQL 연결
↓
테스트
↓
GitHub
↓
Build
↓
카페24 배포
정리
React와 PHP는 API를 통해 데이터를 주고받으며 함께 사용할 수 있습니다.
React는 사용자 인터페이스(UI)를 담당하고, PHP는 로그인, 예약, 게시판, 회원관리와 같은 서버 기능을 처리하며 MySQL과 연결됩니다.
Axios를 이용해 React에서 PHP API를 호출하고, PHP는 MySQL 데이터를 JSON 형태로 반환합니다.
동부산CC 프로젝트에서는 로그인, 예약, 공지사항, 갤러리, 관리자 기능을 모두 이 구조로 구현할 수 있으며, 카페24 환경에서도 운영이 가능합니다.
1. React + PHP란?
React는 화면(UI)을 담당하고,
PHP는 서버(Server)를 담당합니다.
둘은 API를 통해 데이터를 주고받습니다.
React
↓
Axios
↓
PHP(API)
↓
MySQL
↓
PHP
↓
JSON
↓
React
이 구조는 카페24에서도 많이 사용하는 방식입니다.
2. 역할 분리
React
화면 출력
버튼
입력폼
이벤트
사용자 경험(UI)
PHP
로그인
회원관리
예약관리
게시판
DB 처리
MySQL
데이터 저장
3. 프로젝트 구조
project
frontend
React
backend
PHP
api
login.php
reservation.php
notice.php
member.php
프런트엔드와 백엔드를 분리하면 관리가 쉬워집니다.
4. React 요청
Axios
axios.get(
"http://localhost/api/course.php"
);
또는
axios.post(
"/api/login.php",
form
);
5. PHP 응답
예)
$data = [
"name"=>"동부산CC",
"course"=>"EAST"
];
echo json_encode($data);
React는 JSON 데이터를 받습니다.
6. React 받기
const [course,setCourse]
=
useState({});
axios.get(...)
.then((res)=>{
setCourse(
res.data
);
});
7. 화면 출력
<h2>
{course.name}
</h2>
JSON 데이터가
자동으로 출력됩니다.
8. 예약 등록
React
↓
POST
↓
PHP
↓
MySQL
↓
저장 완료
React
axios.post(
"/api/reservation.php",
form
);
PHP
INSERT INTO reservation(...)
9. 예약 조회
React
↓
GET
↓
PHP
↓
SELECT
↓
MySQL
↓
JSON
↓
React
10. 예약 수정
PUT
↓
PHP
↓
UPDATE
↓
MySQL
11. 예약 삭제
DELETE
↓
PHP
↓
DELETE
↓
MySQL
12. 로그인
React
↓
POST
↓
login.php
↓
MySQL
↓
JWT
↓
React 저장
13. 게시판
게시글 작성
↓
PHP
↓
DB
↓
React
↓
목록 출력
14. 공지사항
notice.php
↓
MySQL
↓
JSON
↓
Notice.jsx
React는
map()으로 출력합니다.
15. 갤러리
gallery.php
↓
이미지 목록
↓
React
↓
Gallery
16. 관리자 페이지
React
↓
Axios
↓
admin.php
↓
DB
↓
회원관리
↓
예약관리
↓
공지관리
17. CORS
개발 중에는
localhost:5173
↓
localhost/api
처럼 서로 다른 주소를 사용할 수 있습니다.
이 경우 PHP에서 CORS 허용 설정이 필요합니다.
예)
header(
"Access-Control-Allow-Origin: *"
);
실제 서비스에서는 허용 대상을 필요한 도메인으로 제한하는 것이 좋습니다.
18. 동부산CC 전체 구조
React
↓
Axios
↓
PHP(API)
↓
MySQL
↓
JSON
↓
React
모든 기능이
이 구조입니다.
19. 실무 프로젝트 구조
React
↓
로그인
↓
예약
↓
게시판
↓
갤러리
↓
문의
↓
PHP
↓
MySQL
20. React + PHP 장점
✔ PHP 재사용 가능
✔ 카페24 사용 가능
✔ MySQL 그대로 사용
✔ React UI 적용
✔ 유지보수 쉬움
✔ 실무 활용 가능
21. 동부산CC 기능 연결 예시
React 페이지 PHP API MySQL
Login.jsx login.php member
Reservation.jsx reservation.php reservation
Notice.jsx notice.php notice
Gallery.jsx gallery.php gallery
MyPage.jsx member.php member
Admin.jsx admin.php reservation, notice, member
22. 개발 순서
Figma
↓
React 화면 제작
↓
Axios 연결
↓
PHP API 제작
↓
MySQL 연결
↓
테스트
↓
GitHub
↓
Build
↓
카페24 배포
정리
React와 PHP는 API를 통해 데이터를 주고받으며 함께 사용할 수 있습니다.
React는 사용자 인터페이스(UI)를 담당하고, PHP는 로그인, 예약, 게시판, 회원관리와 같은 서버 기능을 처리하며 MySQL과 연결됩니다.
Axios를 이용해 React에서 PHP API를 호출하고, PHP는 MySQL 데이터를 JSON 형태로 반환합니다.
동부산CC 프로젝트에서는 로그인, 예약, 공지사항, 갤러리, 관리자 기능을 모두 이 구조로 구현할 수 있으며, 카페24 환경에서도 운영이 가능합니다.
#26. React + PHP 연동