[React]useState 사용해보기// error해결 :input is a void element tag and must neither have `children` nor

미션 1 ) OnClick , UseState사용하여, 버튼 클릭 시 숫자가 1씩 증가/감소하도록 만들기.

 

useState 안에 0으로 초기화된 숫자를 넣어준 상태.

setNumber 함수가 실행되면 , number의 상태가 변한다.

 

button tag 안에 onClick을 넣어

상단에 정의해둔 onIncrease, onDecrease 함수가 실행될 수 있도록 하였다.

 

 

동작결과.

+1 버튼을 세번 누르니까 3으로 변했다.

 

 

 

미션2) Onchange 사용하여 , 아이디 입력시 아이디가 화면에 뜨게 하기.

import "./App.css";import React, {useState} from "react";function App() {  const [id, setId] = useState();  const checking = (e) => {    setId(e.target.value)  }  // const onDecrease = () => {  //   setId(id)  // };    return (  <div>    <h1>{id}</h1>    <input type="text" className="id" value = {id} onChange={checking}/>    {/* <input type="password" className="pw"></input> */}  </div>  );}export default App;

 

 

 

처음에 다음과 같은 오류가 떴었는데, 

input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.

input태그 때문에 생긴 오류였다.

 

<이하 수정 전>

<input type="text" className="id" value = {id} onChange={checking}>확인</input>

 

input태크를 수정했더니 잘 됐다.

<이하 수정 후>

<input type="text" className="id" value = {id} onChange={checking}/>

 

 

 

그리고 

jsx 파일일 때는 Classname으로 쓰는게 맞는데,

js 파일일 때는 name의로 써도 똑같이 작동된다.

<input type="text" Classname="id" value = {id} onChange={checking}/>

 

<input type="text" name="id" value = {id} onChange={checking}/>

 

 

 

동작 결과.

입력이 잘 되는 것을 확인 할 수 있다.