input태그에 유효한 숫자

<div id="root"></div>
    <script type="text/babel">
      const App = () => {
        const [message, setMessage] = React.useState("");
        const [phoneNumber, setPhoneNumber] = React.useState("");
        const handleSubmit = (event) => {
          event.preventDefault();
          alert(phoneNumber);
        };
        const handleChange = (event) => {
          setPhoneNumber(event.target.value);

          if (phoneNumber.startsWith(0)) {
            setMessage("Phone Number is valid");
          } else {
            setMessage("Phone should start with 0");
          }
        };
        return (
          <form onSubmit={handleSubmit}>
            <label htmlFor="phone">Phone Number:</label>
            <br />
            <input id="phone" name="phone" onChange={handleChange} />
            <br />
            <br />
            <p>{message}</p>
            <button type="submit">Submit</button>
          </form>
        );
      };
      ReactDOM.render(<App />, document.getElementById("root"));
    </script>

input 태그에 적은 id 에 label 이 따라오다, input박스에 상태가 변할때마다 handleChange 가 호출되다. setPhoneNumber 는 들어올때 마다 phoneNumber 를 바꾸다. 만약 0으로 시작하면 setMessage 가 message 의 값을 바꾸다.

<script type="text/babel">
      const App = () => {
        const [message, setMessage] = React.useState("");
        const [phoneNumber, setPhoneNumber] = React.useState("");
        const handleSubmit = (event) => {
          event.preventDefault();
          alert(phoneNumber);
        };
        const handleChange = (event) => {
          if (event.target.value.startsWith(0)) {
            setMessage("Phone Number is valid");
            setPhoneNumber(event.target.value);
          } else if (event.target.value.length === 0) {
            setPhoneNumber("");
            setMessage("");
          } else {
            setMessage("Phone should start with 0");
          }
        };
        return (
          <form onSubmit={handleSubmit}>
            <label htmlFor="phone">Phone Number:</label>
            <br />
            <input
              id="phone"
              name="phone"
              onChange={handleChange}
              value={phoneNumber}
            />
            <br />
            <br />
            <p>{message}</p>
            <button
              type="submit"
              disabled={
                phoneNumber.length === 0 || message !== "Phone Number is valid"
              }
            >
              Submit
            </button>
            <p>{phoneNumber}</p>
          </form>
        );
      };
      ReactDOM.render(<App />, document.getElementById("root"));
    </script>

input 태그에 글, 숫자를 입력하면 handleChange 가 실행된다
handleChange 에서
값으로 들어온건 event 가 받는다. if문으로 event.target.value.startsWith(0)
으로 시작값이 0이면 setMessage 는 phone number is valid 가 된다.
문자열은 message 가 되어 p 태그에 보여진다.
setPhoneNumber는 useState 로 phoneNumber 를 수정하기 위해 있다.
setPhoneNumber 에 event.target.value 로 받은 값을 phoneNumber 에 넣는다.
else if 로 event.target.value 의 길이가 0 이면 setPhoneNumber 에는 빈값, setMessage 에도 빈값 -> 아무 데이터가 존재하지 않음
else 로 0을 제외한 값이 들어 왔다면 setMessage 로 phone should start with 0 가 나오게 한다.

input 태그에 value ={phoneNumber} 를 하면서 0을 제외한 값이 들어오면
phone should start with 0 이라는 문자열이 message 에 담기게 했다.