현재까지 만든 애플리케이션은 Read만 가능하다. 데이터들도 우리가 추가한 데이터가 아니다.

리액트를 이용해 동적으로 데이터를 추가, 수정, 삭제하고 싶은 욕망이 생겼을 것이다.

이제 하나하나씩 구현해 나가자

create 구현 방식

모든 정보 기술은 CRUD안에 갇혀있다고 생각해볼 수 있다.

• C : Create
• R : Read
  위 두가지는 핵심적인 오퍼레이션이다.

그리고

• Update
• Delete
  위처럼 비교적 사소한 작업이 있다.

지금까지 작성한 리액트 애플리케이션은 Read하는 것을 먼저 살펴보았다.

이번브터 리액트를 통해 Create 기능을 먼저 구현해보자.

<Navi>컴포넌트와 <Arti>컴포넌트 사이에 생성, 수정, 삭제 버튼을 만들 것이다.

먼저 구현할 기능인 생성기능을 생각해 보자. create버튼을 누르면 앱 컴포넌트의 mode가 create로 바뀔 것이다.

그러면 contents라고 하는 읽기에서 사용되고 있는 컴퍼넌트가 글을 추가할 때 사용하는 컴퍼넌트로 바뀌게 될 것이다.

그 컴포넌트는 <Form>이 들어 있고 정보를 입력해서 저장 버튼을 누르면
<App>컴포넌트의 contents의 목록에서 새로운 컴퍼넌트 정보가 id값, 제목, 본문이 객체로 담겨서 contents에 추가될 것이다.

좀 더 구체적으로 살펴보자. create, update, delete세 개를 mode에서 추가한다.

• 그리고 "create"를 클릭하면 <App>의 mode가 create로 바뀌었고, 컴포넌트가 <CreateArti>로 바뀌었다.
  

그 다음으로 <input>에 글을 작성하고 <CreateArti>에서 submit 버튼을 누르면 이벤트가 발생되고 <App> 컴퍼넌트에추가 하려고 하는 글에 해당되는 객체가 contents배열 끝에 추가된다.

즉, 배열의 3번째 인덱스에 데이터가 추가되고 그에 따라서 <Navi>는 네 개의 행이 될 것이다.

화면을 통해 <Navi>글목록 끝에 React가 추가된 것을 확인할 수 있다.

React를 클릭하면 mode가 read로 바뀌고 selected_content_id가 4번으로 바뀌게 된다.

그에 따라서 <ReadArti>로 컴퍼넌트가 바뀌었고 다른 정보가 화면에 표시되게 된다.