React input값 바꾸기

React로 input값을 건드리기 위해서는 작업이 필요합니다.

React에서는 input값이 unchangable하기 때문입니다.

간단하게 컴포넌트 안에 input태그를 설정하고 value의 초기값을 0으로 두면 그 이후로는 값이 변하지 않는 것을 알 수 있습니다.

그렇기에 React의 input값을 수정하는 방법을 알아두는 것이 좋습니다.

정확히는 input 안에 값은 들어가지만 그것이 자동으로 rendering되지 않으니 값이 변하지 않는거죠.

그렇기에 우리는 value값을 state로 받아서 변경을 해주면서 동시에 input태그에 반영을 시킬 필요가 있습니다.

방법은 간단합니다. 일단 input태그의 value값을 state값으로 설정을 해 둡니다.

const [minutes, setMinutes] = React.useState()

그런 뒤 이 state변수를 value값에 넣어주도록 합니다.

<input value={minutes} id="minutes" onChange={onChange} placeholder="Minutes" type="number" />

이러면 state 변수인 minutes의 값에 따라 input값이 바뀔텐데요.

우리는 이 값을 우리가 입력하는 값으로 바꿔주고 싶습니다.

그렇기 때문에 우리가 사용해야하는 것이 onChange 이벤트입니다.

이 이벤트는 input값에 변화가 일어날 때 작동을 하게 되고,

그 이벤트가 작동하면서 키보드로 입력되어 변화한 input의 value값도 가지고 오므로

const onChange = (event) => console.log(event.target.value) //우리의 입력으로 change이벤트가 일어나 변경된 value값
setMinutes(event.target.value)

위와 같은 식으로 state값을 변경해주면 input 안에 값이 들어갈 수 있게 되며 value값도 바꿔줄 수가 있게 됩니다.

이렇듯 state값을 통해서 우리는 JS로 interactive한 페이지를 만들었던 것들을 React로도 충분히 구현할 수 있게 됐습니다.