생활코딩 react (19.1. create 구현 - 소개)

# React-19.1. create 구현 -  소개 

 - CRUD 처리

 

1. 설계

1.1 Toc 목록 상단 에 버튼 컴포넌트 추가 : 생성, 수정, 삭제

1.2 create 버튼 : app의 mode 값을 create로 변경

 - read 모드의 Article 의 내용(컴포넌트)을 create 내용(컴포넌트)으로 교체

1.3 create 컴포넌트 : 입력폼 구성

 - create 정보 입력 후 저장 시

 > app 컴포넌트의 contents state에 새로운 contents 정보 추가(id, 제목, 본문)

 - toc에 표시될 내용에 추가된 내용 표시 : 생성기능

 

2. 화면 리뷰(작성된 상태)

2.1 toc 항목 위에 create, update, delete(버튼) 추가

2.2 create 클릭 

 - mode 값을 'create'로 변경

 - content 영역을 CreateContent(input form 구성)로 변경

2.3 CreateContent 영역의 input form 작성 후 submit 버튼 크릭 

 - event 발생(app contents 영역에 등록되어 있는 항목 끝에 input form으로 입력한 정보 등록)

 - toc 영역에 등록된 정보가 추가됨

 - CreateContent 입력 항목은 초기화 됨

2.4 toc에 표시된 항목 선택 (등록된 항목)

 - content 영역을 선택한 항목에 맞는 ReadContent로 변경