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서버에 요청을 할 수 있다.