[React] CRUD를 곁들인,,, (Create)

create

 

어떻게 리액트를 통해서 create를 할 것 인가?!

 

해볼 것은?

간단하게 입력 폼을 만들고 입력된 것을 받아서 본문 내용에 표시할 것이다. 이것이 생성 기능이다.

 

목록에 create, update, delete 을 만들어준다.

이 코드를 Conrtorl.js로 빼주고 App.js에 import 해주었다.

 

 

 

 

Control 컴포넌트에서 목록 중 하나를 클릭했을 떄의 동작을 만들기 위해서 이벤트를 정의할 것이다.

onChagneMode라는 핸들러가 실행되게 할 것이다

(이벤트가 실행됐을 때 실행되어야 할 함수를 핸들러라고도 한다.)

각각의 목록을 클릭하면 onChangeMode를 인자로 현재 누른 목록의 이름을 인자로 호출한다.

onChangeMode에서는 이 인자를 받아서 현재 state의 mode를 설정한다.

 

 

 

create를 누르면 즉 mode가 create 라면 아래 content를 create-content로 바꿔줄 것이다.

기존에 있던 Content를 ReadContent로 바꿔주고 CreateContent.js 파일을 하나 더 만들어 준다.

(import, export, 클래스이름, 파일명 다 바꿔주기!)

 

Control에서 create를 클릭하면 App의 모드가 create로 바꾸는 것까진 되어있다.

여기서 ReadContent를 CreateContent로 교체하는 것까지 할 것이다.

그래서! ReadContent를 가변적으로 바뀔 수 있도록 하기위해서 _article이라는 변수로 처리할 것이다.

 

 

 

변수를 먼저 var _article = null; 로 설정해준다. 

그리고 welcome, read 모드에 따라서 _article에 title과 desc 를 담아준다.

그리고 return 안에서는 <ReadContent>대신 {_article}으로 대체한다.

 

 

Create로 mode가 바뀌었을 때 본문내용을 CreateContent로 바꾸는 코드이다.

CreatContent에도 입력 폼을 넣어주었따.

 

 

입력한 정보를 create_process 페이지로 보낼 것이다.

그리고 데이터를 추가, 수정, 삭제를 할 때에는 method가 post 방법으로 가야한다. 그래야 url에 노출이 안된다.

onSubmit은 submit 버튼을 클릭하면 버튼이 포함된 폼 태그의 onSubmit이 라는 이벤트가 실행된다.

html의 form 기능이 고유하게 가진 기능이다. 리액트 기능 아님

form태그에서는 submit 버튼을 클릭했을 떄 action이 가리키는 페이지로 이동하는데,

지금 우리는 리액트를 사용해서 페이지 이동없이 모든 일을 할 수 있는 application을 만들고 싶다.

제출 버튼을 눌렀을 때 알람을 띄워서 동작이 잘 되는지 확인했다.

 

 

 

이제는 submit 버튼을 눌러서 onSubmit 이벤트가 실행되었을 때 CreateContent을 가져다쓰고있는 App컴포넌트의 contents 라는 데이터 끝에 입력한 데이터를 추가해볼 것이다.

그러기위해서는 createContent에 설치된 이벤트를 실행시켜야한다.

여기에도 onSubmit라는 이벤트를 만들어서 그 안에 실행시킬 함수를 만들었다.

 

CreateContent.js의 onSubmit을 호출할 때 입력한 타이틀과 desc를 보내주는데 

이 떄 찾는 방법은 debugger를 사용해서 타이틀과 desc를 입력해서 제출버튼을 눌렀을 때의 e 객체안의 속성 값들을 잘 살펴보면 된다.

(onsubmit 이벤트에서 어떻게 form의 value 값을 가져올 수 있나요??)

 

 

찾아봤더니

e.target.title.value

e.target.desc.value로 그 값들을 가져올 수 있었다.

 

 

이제 이렇게 가져온 값을 state의 contents 끝에 추가해주면 된다.

기존에 있던 id 에서 1 더 큰 id 값을 만들어야한다. 수업에서는 어디?에 저장해놓는 방법으로 했다

max_content_id는 어떤 데이터를 추가할 때 id 값을 뭐로 할까에 대해서만 필요한 정보일 뿐 ui에 영향을 주지 않기 때문에 state 값으로 안해도 된다. 오히려 하면 불필요한 rendering이 발생할 수도!

 

 

이렇게까지 완료하면 입력한 정보가 웹 페이지에 잘 표시되는 것을 확인할 수 있다.