[React] Todo List 만들기(CRUD 기본 개념)

완료 UI

 

TodoList 만들기

- 동적 데이터 관리 및 CRUD 구현

- 배열 형태를 다루는 서비스 개발

 

 

핵심 기능

1. 오늘의 날짜 자동 출력 (new Date()활용)

2. Todo 추가, 완료 토글, 삭제 기능 구현

3. 상태 데이터 관리 및 Todo 객체 구조 설계

4. useRef를 통한 Todo 객체 Id 지정

 

 

CRUD

1. Create: 투두 추가하기

2. Read: 투두리스트 렌더링 하기

3. Update: 투두 수정하기

4. Delete: 투두 삭제하기

 

 

결론

TodoList 개발을 통해 배열 형태의 데이터를 처리하는 방법, 상태 관리, CRUD의 개념과 React Hook 활용 능력을 향상시키고, 웹 개발의 실무 경험을 쌓을 수 있었다.

 

 

---

 

 

CRUD란 무엇인가?

CRUD는 'Create, Read, Update, Delete'의 약어로 정보의 기본 처리 과정을 의미한다.

 

1. Create : 생성 데이터 베이스에 새로운 데이터를 생성할 때 사용한다. 리소스에 접근할 때 사용할 수 있는 고유 Id가 할당된다.

2. Read : 조회 데이터를 조회한다. 리소스를 검색하고 결과를 표시한다.

3. Update : 수정 기존 데이터를 수정한다.

4. Delete : 삭제 데이터를 삭제한다.

 

REST API에서의 CRUD

REST 환경에서 CRUD는 HTTP 메서드인 POST, GET, PUT, DELETE에 각각 해당한다. 클라이언트와 서버간의 HTTP 프로토콜을 이용해 REST API를 설계하고 작성할 때에도 CRUD 개념이 사용된다. 클라이언트는 적절한 HTTP 메서드와 URL을 사용해서 서버에 요청을 보내어 데이터를 생성, 조회, 수정, 삭제할 수 있다.

 

참고 문서

https://developer.mozilla.org/ko/docs/Glossary/CRUD

https://idkim97.github.io/2022-08-17-CRUD%EB%9E%80/

https://www.codecademy.com/article/what-is-crud