[리액트] State(3)

useState을 이용한 data값 변경

const [stats, setState] = React.useState(0);
const onClick = () => {
	setState((current) => current + changeValue)
}

• setState을 함수형태로 작성한다.
• 첫 번째 인자로 현재 값이 들어가고 새로운 데이터로 return 된다.

사용자로부터 Input 값 받기

label

<div>
  <h1>Super Converterr</h1>
  <label for="minutes">Minutes</label>
  <input type="number" placeholder="Minutes" id="minutes"/>
  <br />
  <label for="hours">Hours</label>
  <input type="number" placeholder="Hours" id="hours"/>
</div>

JSX에서는 위와 같이 label 안에 for을 쓰지 않는다.
for은 Javascript용어에 해당하기 때문이다. (이미 선점된 단어에 해당한다)
그렇다면 label 내의 for는 어떻게사용해야 할까? 바로 htmlFor로 변경해줘야한다.
class의 경우에는 className으로 작성한다.

input

• React JS 에서 Input은 uncontrolled라고 알려져있다.