[React] State, Events, and Forms: Interactive Components

 

 

▶ Controlled Elements

1. 상태정의 useState
2. 폼 요소의 value 속성에 React상태 바인딩
3. onChange 이벤트 핸들러를 통해 사용자가 input 요소에 값을 입력하면 상태가 업데이트 된다.

---

#challenge 1: Date counter(v1)

• useState, value, onChange 

 

기본값/증가/감소

---

#challenge 2: 카드 뒤집기

---

#challenge 3: Date counter(v2)

• useState, value, onChange 

 

<input
  type="text"
  onChange={e => setCount(Number(e.target.value))}
  value={count}
/>

 

입력 가능한 상태(type="text")로 설정한 후, 
onChange 이벤트를 통해 현재 입력된 값을 가져와서 count 상태를 업데이트하고, 
value 속성에 count 값을 넣어서 화면에 현재 count 값이 나타나도록 설정

 

이렇게 하면 type='text'로 설정된 입력 필드는 사용자가 값을 입력할 수 있게 되고, 

onChange 이벤트 핸들러는 사용자가 입력한 값을 감지하여 count 상태를 업데이트 한다.

value={count}를 통해 현재 count 상태의 값이 입력 필드에 표시되도록 설정한다.

이로써 사용자가 값을 입력하면 해당 값이 count 상태에 반영되고, 동시에 입력 필드에도 보여지게 된다.