<form> 추가하기

이번에는 <CreateArti> 글을 추가하는 기능의 Form을 완성해보자.

우선 App.js로 가서 mode를 create로 바꿔서 우리가 구현하는 것을 확인하기 위해 좋게 바꿔두자.

• App.js

this.state = {
      mode: 'create', // 모드를 create로 변경
  ...

---

• CreateArti.js
• 그리고 CreateArti.js 파일에 생성해둔 form 태그 안에 다음과 같이 코드를 추가한다.

<article>
  <h2>Create</h2>
  <form>
    <p><input type="text" name="title" placeholder="title"></input></p>
    <p>
      <textarea name="desc" placeholder="description"></textarea>
    </p>
    <p>
      <input type="submit"></input>
    </p>
  </form>
</article>

위 코드에서 placeholder 속성은 어떤값도 입력되지 않았다면 "placeholder"에 부여한 "title"이 출력되는 것 이다.
<textarea> 태그는 입력할 텍스트가 여러 줄일 때 사용하는 것이다.

<form> 태그의 구조

• <form> 태그 예시

<form action="/create_process" method="post"
  onSubmit={function(e){
    e.preventDefault();
    alert('Submit!!');
  }.bind(this)}>

위 코드를 보면 <form> 태그는 리액트를 쓰지 않을 때 action 값에 따라 해당 페이지로 사용자가 입력한 정보를 전송한다.

또한 데이터를 추가, 수정, 삭제할 대에는 url에 노출되지 않기 위해 method를 POST 방식으로 정의한다.

submit 버튼을 클릭했을 때 submit 버튼을 포함하는 form 태그의 onSubmit 이라는 이벤트가 실행되도록 약속되어 있다.

e.preventDefault() 함수를 통해 Submit 버튼을 클릭했을 때 action이 가리키는 페이지로 이동하지 못하게 한다.