22. CRUD (Create · Read · Update · Delete)
1. CRUD란?
CRUD는 데이터베이스에서 가장 기본이 되는 4가지 기능입니다.
기능 의미 HTTP
Create 데이터 등록 POST
Read 데이터 조회 GET
Update 데이터 수정 PUT / PATCH
Delete 데이터 삭제 DELETE
예를 들어 동부산CC 예약 시스템에서는
예약하기 → Create
예약목록 보기 → Read
예약 변경 → Update
예약 취소 → Delete
가 모두 CRUD입니다.
2. CRUD 전체 구조
React
↓
Axios
↓
PHP(API)
↓
MySQL
↓
JSON
↓
React
React는 화면을 만들고,
PHP는 데이터를 처리하며,
MySQL은 데이터를 저장합니다.
3. Create (등록)
예약하기 예제
Reservation.jsx
const submit = async () => {
await axios.post(
"/api/reservation.php",
form
);
alert("예약 완료");
};
PHP
INSERT INTO reservation
(name, phone, course)
VALUES (?, ?, ?)
예약 데이터가 DB에 저장됩니다.
4. Read (조회)
React
const [list, setList] =
useState([]);
조회
useEffect(() => {
axios
.get("/api/reservation.php")
.then((res) => {
setList(res.data);
});
}, []);
출력
{
list.map((item) => (
<div key={item.id}>
{item.name}
</div>
))
}
5. Update (수정)
예약 수정
await axios.put(
"/api/reservation.php",
form
);
PHP
UPDATE reservation
SET name=?,
phone=?
WHERE id=?
예약 정보가 변경됩니다.
6. Delete (삭제)
삭제 버튼
<button
onClick={()=>
remove(item.id)
}
>
삭제
</button>
함수
await axios.delete(
"/api/reservation.php?id="+id
);
PHP
DELETE FROM reservation
WHERE id=?
7. CRUD 실행 흐름
사용자 클릭
↓
Axios
↓
PHP
↓
MySQL
↓
JSON
↓
React
↓
화면 변경
8. 동부산CC 예약 시스템
예약 입력
↓
POST
↓
예약 저장
↓
GET
↓
예약 목록
↓
PUT
↓
예약 변경
↓
DELETE
↓
예약 취소
9. 게시판 CRUD
게시글 작성
↓
POST
↓
게시글 목록
↓
GET
↓
게시글 수정
↓
PUT
↓
게시글 삭제
↓
DELETE
10. 회원관리 CRUD
회원가입
↓
POST
↓
회원목록
↓
GET
↓
회원정보 수정
↓
PUT
↓
회원삭제
↓
DELETE
11. useState 연결
const [list,setList]
=
useState([]);
조회 후
setList(
res.data
);
React가 자동으로
화면을 다시 그립니다.
12. useEffect 연결
useEffect(()=>{
loadData();
},[]);
페이지가 열리면
자동으로 목록을 가져옵니다.
13. map() 연결
{
list.map((item)=>(
<Card
key={item.id}
item={item}
/>
))
}
DB 데이터가
자동으로 카드 형태로 출력됩니다.
14. CRUD 실무 흐름
React
↓
Axios
↓
API
↓
DB
↓
JSON
↓
State
↓
React 렌더링
이 흐름은
거의 모든 React 프로젝트에서 동일합니다.
15. 동부산CC 프로젝트 적용
예약
CRUD
공지사항
CRUD
문의하기
CRUD
회원관리
CRUD
갤러리
CRUD
관리자 페이지
CRUD
모든 관리 기능이 CRUD로 구성됩니다.
16. React에서 자주 사용하는 함수
조회
axios.get()
등록
axios.post()
수정
axios.put()
삭제
axios.delete()
17. CRUD 프로젝트 구조
pages
Reservation.jsx
↓
components
ReservationForm.jsx
ReservationList.jsx
ReservationItem.jsx
역할을 분리하면
유지보수가 쉬워집니다.
18. CRUD 실행 순서
입력
↓
POST
↓
DB 저장
↓
GET
↓
State 저장
↓
map()
↓
화면 출력
19. CRUD와 React 문법 연결
기능 React 문법
등록 Form + POST
조회 useEffect + GET
수정 useState + PUT
삭제 Event + DELETE
출력 map()
저장 State
20. CRUD가 중요한 이유
React 프로젝트의 대부분은 결국 CRUD입니다.
예를 들어
쇼핑몰
게시판
예약 시스템
회원관리
병원 예약
골프 예약
학원 관리
모두 CRUD 구조를 기반으로 동작합니다.
정리
CRUD는 등록(Create), 조회(Read), 수정(Update), 삭제(Delete) 기능을 의미하며, React 실무 프로젝트의 핵심입니다.
React에서는 Axios를 이용하여 API와 통신하고, PHP 또는 Node.js가 MySQL과 연결되어 데이터를 처리합니다.
조회한 데이터는 useState에 저장하고 map()으로 화면에 출력하며, 등록·수정·삭제 후에는 다시 데이터를 조회하여 최신 상태를 화면에 반영합니다.
동부산CC 프로젝트에서는 예약 시스템, 공지사항, 갤러리, 문의하기, 회원관리 등 대부분의 기능을 CRUD 방식으로 구현할 수 있습니다.
1. CRUD란?
CRUD는 데이터베이스에서 가장 기본이 되는 4가지 기능입니다.
기능 의미 HTTP
Create 데이터 등록 POST
Read 데이터 조회 GET
Update 데이터 수정 PUT / PATCH
Delete 데이터 삭제 DELETE
예를 들어 동부산CC 예약 시스템에서는
예약하기 → Create
예약목록 보기 → Read
예약 변경 → Update
예약 취소 → Delete
가 모두 CRUD입니다.
2. CRUD 전체 구조
React
↓
Axios
↓
PHP(API)
↓
MySQL
↓
JSON
↓
React
React는 화면을 만들고,
PHP는 데이터를 처리하며,
MySQL은 데이터를 저장합니다.
3. Create (등록)
예약하기 예제
Reservation.jsx
const submit = async () => {
await axios.post(
"/api/reservation.php",
form
);
alert("예약 완료");
};
PHP
INSERT INTO reservation
(name, phone, course)
VALUES (?, ?, ?)
예약 데이터가 DB에 저장됩니다.
4. Read (조회)
React
const [list, setList] =
useState([]);
조회
useEffect(() => {
axios
.get("/api/reservation.php")
.then((res) => {
setList(res.data);
});
}, []);
출력
{
list.map((item) => (
<div key={item.id}>
{item.name}
</div>
))
}
5. Update (수정)
예약 수정
await axios.put(
"/api/reservation.php",
form
);
PHP
UPDATE reservation
SET name=?,
phone=?
WHERE id=?
예약 정보가 변경됩니다.
6. Delete (삭제)
삭제 버튼
<button
onClick={()=>
remove(item.id)
}
>
삭제
</button>
함수
await axios.delete(
"/api/reservation.php?id="+id
);
PHP
DELETE FROM reservation
WHERE id=?
7. CRUD 실행 흐름
사용자 클릭
↓
Axios
↓
PHP
↓
MySQL
↓
JSON
↓
React
↓
화면 변경
8. 동부산CC 예약 시스템
예약 입력
↓
POST
↓
예약 저장
↓
GET
↓
예약 목록
↓
PUT
↓
예약 변경
↓
DELETE
↓
예약 취소
9. 게시판 CRUD
게시글 작성
↓
POST
↓
게시글 목록
↓
GET
↓
게시글 수정
↓
PUT
↓
게시글 삭제
↓
DELETE
10. 회원관리 CRUD
회원가입
↓
POST
↓
회원목록
↓
GET
↓
회원정보 수정
↓
PUT
↓
회원삭제
↓
DELETE
11. useState 연결
const [list,setList]
=
useState([]);
조회 후
setList(
res.data
);
React가 자동으로
화면을 다시 그립니다.
12. useEffect 연결
useEffect(()=>{
loadData();
},[]);
페이지가 열리면
자동으로 목록을 가져옵니다.
13. map() 연결
{
list.map((item)=>(
<Card
key={item.id}
item={item}
/>
))
}
DB 데이터가
자동으로 카드 형태로 출력됩니다.
14. CRUD 실무 흐름
React
↓
Axios
↓
API
↓
DB
↓
JSON
↓
State
↓
React 렌더링
이 흐름은
거의 모든 React 프로젝트에서 동일합니다.
15. 동부산CC 프로젝트 적용
예약
CRUD
공지사항
CRUD
문의하기
CRUD
회원관리
CRUD
갤러리
CRUD
관리자 페이지
CRUD
모든 관리 기능이 CRUD로 구성됩니다.
16. React에서 자주 사용하는 함수
조회
axios.get()
등록
axios.post()
수정
axios.put()
삭제
axios.delete()
17. CRUD 프로젝트 구조
pages
Reservation.jsx
↓
components
ReservationForm.jsx
ReservationList.jsx
ReservationItem.jsx
역할을 분리하면
유지보수가 쉬워집니다.
18. CRUD 실행 순서
입력
↓
POST
↓
DB 저장
↓
GET
↓
State 저장
↓
map()
↓
화면 출력
19. CRUD와 React 문법 연결
기능 React 문법
등록 Form + POST
조회 useEffect + GET
수정 useState + PUT
삭제 Event + DELETE
출력 map()
저장 State
20. CRUD가 중요한 이유
React 프로젝트의 대부분은 결국 CRUD입니다.
예를 들어
쇼핑몰
게시판
예약 시스템
회원관리
병원 예약
골프 예약
학원 관리
모두 CRUD 구조를 기반으로 동작합니다.
정리
CRUD는 등록(Create), 조회(Read), 수정(Update), 삭제(Delete) 기능을 의미하며, React 실무 프로젝트의 핵심입니다.
React에서는 Axios를 이용하여 API와 통신하고, PHP 또는 Node.js가 MySQL과 연결되어 데이터를 처리합니다.
조회한 데이터는 useState에 저장하고 map()으로 화면에 출력하며, 등록·수정·삭제 후에는 다시 데이터를 조회하여 최신 상태를 화면에 반영합니다.
동부산CC 프로젝트에서는 예약 시스템, 공지사항, 갤러리, 문의하기, 회원관리 등 대부분의 기능을 CRUD 방식으로 구현할 수 있습니다.
#22. CRUD (Create · Read · Update · Delete)