[ React ] React로 CRUD 원리 이해

React로 CRUD 원리 이해

 

투두 리스트 (To-do list) 애플리케이션을 기준으로 CRUD 작업을 설명. 투두 리스트는 할 일을 관리하는 간단한 애플리케이션으로, 각 작업이 CRUD 작업에 해당하는 방식으로 구현될 수 있습니다.

 

CRUD는 Create, Read, Update, Delete의 약자

Create: 새로운 할 일을 추가

Read: 추가된 할 일 목록을 화면에 표시

Update: 기존 할 일의 완료 상태를 변경 또는 할 일 내용을 수정

Delete: 특정 할 일을 삭제

 

1. Create (생성)

할 일을 새롭게 추가하는 작업입니다. 사용자가 새로운 할 일을 입력하면 이를 저장하여 화면에 표시하는 기능입니다.

 

예

• 사용자가 입력창에 "React 공부하기"라는 할 일을 작성한 후, "추가" 버튼을 클릭합니다.
• 새롭게 입력된 할 일이 투두 리스트에 추가됩니다.

 

2. Read (읽기)

이미 추가된 할 일 목록을 화면에 보여주는 작업입니다. 투두 리스트에 추가된 할 일들을 읽어와서 화면에 표시합니다.

예

• 투두 리스트에 "React 공부하기", "운동하기" 등의 할 일들이 이미 존재하고, 이 목록이 화면에 렌더링됩니다.

 

3. Update (수정)

기존에 추가된 할 일을 수정하는 작업입니다. 예를 들어, 사용자가 이미 추가한 할 일의 내용을 수정하거나, 할 일의 완료 상태를 업데이트하는 기능을 제공합니다.

 

 

4. Delete (삭제)

기존에 추가된 할 일을 삭제하는 작업입니다. 사용자가 특정 할 일을 삭제하면 투두 리스트에서 해당 항목이 제거됩니다.

 

 

예