[React] Input value | Forms | event.preventDefault(); |onClick, onChange

Form 형태에서 내용을 입력 받아 화면에 보이게 하는 법을 알아보자. 

 

기본 세팅 

인풋과 버튼이 있다. 

 

 

 

 

onChange attribute 사용

input에 이름을 입력하면 콘솔에 이름이 나오게 해보자. 

이 때 onChange attribute를 사용한다.

onChange에 벨류를 함수로 설정해주고 벨류에 변화가 생길 때마다 작동을 한다. 

https://www.w3schools.com/tags/ref_eventattributes.asp

 

 

 

우선은 인풋에 내용 입력 했을 때 콘솔에 changed가 뜨도록 해보자 

 

인풋에 내용을 입력하였더니 

 

콘솔에 "Changed"라는 텍스트가 떴다.

handleChange 함수가 잘 작동되고 있다. 

 

 

인풋에 내용이 입력되어

onChange에 있는 handleChange 함수가 트리거 될때 

동시에 object도 같이 패스된다.

이 object가 파라미터 event와 같다. 

target: the element that triggered this event

value, placeholder, type: target attributes 

 

 

 

인풋에 내용을 입력하면 

 

콘솔에 오브젝트 attribute의 벨류들이 나온다. 

 

 

 

이름만 필요하기 때문에 event.target.value만 남긴다. 

그리고 useState()를 사용해서 입력한 이름들이 업데이트되어 나오도록 한다. 

 

 

 

이름을 입력해 보자. 

잘 작동되는 것을 볼 수 있다. 

 

 

 

 

In HTML, the elements themselves are responsible for handling their own state. 

value attribute를 예로 들 수 있다.

html에서는 value가  input에 넣는 내용이 되지만,

React에서는 이벤트에서 오는 내용을 담는다.

 

 

 

이렇게 {name}이 <h1> 안에 들어가서도 

value에서도 {name}이 여기저기 사용되는데 

이렇게 리액트의 스타일로 여기저기 쓰인다. 

이런 것을 Controlled Components 라고 한다. 

 

---

Controlled Components ?? 

https://reactjs.org/docs/forms.html

value를 추가시 우리의 state에서 나온 

뿌리가 하나인 An input form element 의 value 가 리액트에 의해 컨트롤 되는 것을 말한다. 

<input>

<textarea>

<select>

 

 

---

 

 

문제 

 

인풋에 내용을 입력했을 때가 아니라 submit 버튼을 눌렀을 때 

위 <h1>에 이름이 써지도록 해보자 

 

 

input에서 내용을 받아 버튼 눌렀을 때 이름이 뜨게 한다. 

 

 

인풋에 내용이 입력되면 onChange함수가 호출된다. 

onChange 함수에서 입력한 내용을 받아 

useState로 setName() 함수에 입력된 내용을 가지고 있는다. 

이 입력된 내용은 name 벨류가 되고 

 

버튼을 클릭하면 hanldeOnClick 함수가 호출되고 

useState()로 setHeading함수에 벨류를 

name으로 넣어주면 인풋에 입력된 내용을 받아 Hello 옆에 보여줄 수있게 된다. 

 

이름 입력 후 버튼 누르고 나니 이름이 보인다. 

 

 

---

 

form 태그 사용

인풋과 버튼을 form으로 감싸주고 

button은 type을 submit으로 설정해준다. 

 

 

 

form에 폼이 submit 됐을 때 트리거되는 onSubmit을 적어주고 handleClick 함수가 호출 되도록 한다. 

 

 

 

UI에 이름을 입력하면 잠깐 동안 <h1>에 이름이 들어갔다가 리프레쉬가 되어 버린다.

이를 고치기 위해 handleClick()에 event를 파라미터로 받아서 preventDefault를 콜한다.

 

 

이제는 이름이 없어지지 않고 유지되는 것을 볼 수 있다.