Form - 오랜시간 함께했지만, 아직 낯선 아이(Markdown editor만들기) + React

공부 목표

form은 항상 쓰면서 뭔가 잘모르겠어서 이번기회에 이 mdn 문서를 읽고 알게 된 내용을 간단하게 정리해보고자한다. 

 

Form을 알아보자

html폼은 사용자와 웹사이트/app이 상호작용할때 중요한 기술중의 하나이다. 

 

- form과 action, method: 필수이다(데이터를 전송하기 위해선)

<form action="/my-handling-form-page" method="post">
</form>

이때 전송하는 동작은 button으로 설정하는데(input도 되긴하는것 같은데 button방식을 사용해야한다) submit, reset, button이 있다. 

 

전송을 위해선 submit type 버튼을 만들어야한다. 

 

- name: 데이터의 이름을 지정하는 것. form에는 많은 폼 위젯이 있지만 이 위젯에는 name속성을 지정해줘야, 데이터의 이름이 지정된다. 

 

- change event: [참고한 글]

   textarea의 경우 onchange가 focus를 벗어낫을때 동작한다고 한다. 

 

- oninput event의 경우는 내부의 value가 변했을때 동작한다. [참고]

 

 

 

 

내가 form 을 통해서 만들고 싶은것

이건 벨로그의 에디터!!!

Velog처럼 좀 멋진걸 한번 만들어보고 싶어서 보는데, 이 에디터를 정말 한번 만들어 보고 싶은데, 어떻게 하면 될지 고민이다. 

 

 

진행 사항(React)

<form>
  <TextAreaStyle
    name="contents"
    value={contents}
    onInput={(e) => setContents(e.target.value)}
  ></TextAreaStyle>
  <MarkDownBody>{contents}</MarkDownBody>
  <div class="button">
  	<button type="submit">Send your message</button>
  </div>
</form>

 

이렇게 작성해서, 아래와같이 구현했다. 

 

내가 만든 에디터 초안

코드를 설명하자면 react에서는 input, textarea에 value속성을 두고, 얘가 변경되는것을 그때그때 setState해서 반영하는 방식을 많이 봤다(그외에 더 좋은 방식이 있는지 찾아봤는데, 못찾았다)

 

이렇게 Textare에 들어오는값을 detect해서 MarkdownBody라는 내가 만든 custom component에 값을 Pass해줬다. 내부적으로는 이건 Remarkable.js를 사용해서 rendering해주는 컴포넌트이다. 

 

 

 

최종 모양

최종!

 

 

여기서 form 액션만 추가하면 next.js서버에 요청을 할 수 있다.