ReactJS 에서 form사용하기

오늘은 ReactJS에서 form을 사용하는 방법에 대해서 정리해보고자 합니다.

1.Form

폼은 웹 프런트 개발에 있어서 가장 중요한 것이라고 할 수 있습니다.

유저입력을 받을 수 있는 부분이기 때문이지요.

기본적으로 form을 ReactJS에서 이용한다고 하면,

다음과 같은 부분들을 생각할 수 있을 것 같습니다.

먼저, Component를 만들고,

JSX형태로 input을 리턴해 줍니다.

이 때 input된 값에 반응하기 위해서,

onChange에 들어온 값을 이벤트 핸들러로 핸들해 주면 됩니다.

이벤트 핸들러에서 onClick이나 onChange를 통해서 입력된 값을 받기 위한 방법은

아래와 같이 event의 약자인 e를 인자로 받아서,

e.target.vaue를 통해서 리스닝된 값을 받을 수 있습니다.

e.target.value

저희는 이렇게 받은 값을 state에 저장해 주면 되는 것이구요.

한가지 잊지 말아야 할 것은 Input태그에 value값을 state에 저장한 값을 알려주어야

Input엘리먼트에 변화된 값을 알려줄 수 있습니다.

Input태그에서 type값을 변경함으로서 

file부터 checkbox까지 다양한 값을 받아들일 수 있는데요.

아래링크에서 input type에 대한 다양한 레퍼런스를 확인해 볼 수 있습니다.

참고로 아래 레퍼런스는 html기준입니다.

>> https://www.w3schools.com/tags/att_input_type.asp

ReactJS에서 form을 사용하는 방법에 대해서 정리해 보았구요.

추가적인 내용은 이 글을 통해서 업데이트 하도록 하겠습니다.