React { Form }

Form 다뤄보기

native Form 태그를 한번 리액트에서 다뤄보자, 간단하게 코드를 가져와서 붙여 넣어보면 

    const App = () => {
      
      return (
        <form>
          <label for="fname">First name:</label><br/>
          <input type="text" id="fname" name="fname" value="John"/><br/>
          <label for="lname">Last name:</label><br/>
          <input type="text" id="lname" name="lname" value="Doe"/><br/><br/>
          <input type="submit" value="Submit"/>
        </form>
      );
    }

  ReactDOM.render(<App />, document.getElementById("root"));

이렇게 콘솔에서 에러가 나오는데, 이는 리액트가 알아들을 수 있게 form태그 안 속성이름을 저렇게 바꿔줘야한다는 것이다.

그리고 또한 submit 하면 자동으로 새로고침을 수행해주는데 이는 handleSubmit이라는 함수를 만들어서 관리해 주도록 한다. 

 const handleSubmit = (event) => {event.preventDefault();}

 

 

하지만 여기서 끝날 수 없다. Input 값을 확인해줘야 겠다. form의 강점은 form안에 인풋 입력값들이 딱 알잘딱하게 정돈되어 나온다. 하지만 어떻게 값을 추적해야할지 모르겠으면 일단console.dir()로 출력을 해본다. 

이런식으로 객체 데이터가 쭉 나열될텐데, 내리다보면 elements라는 곳에 input값들이 적혀 있다. 그러면 이제 value값 추적은 끝났으니 바로 console.log(event.target.elements.fname.value) 

이렇게 출력하면 firstname 의 입력값이 출력된다. 근데 여기서 신기한점은 input 값 속성안에 name이랑 id 둘다 식별자가 똑같으면 하나만 있어도 value값이 감지가 된다. 중요한 사안인지는 모르겠지만 하나를 지워도 다른하나를 인지한다는게 인상깊었다. 

 

 

 

https://www.w3schools.com/html/html_forms.asp

HTML Forms

 

다음은 Form을 단순한 전화번호 입력칸 컨셉인데, 굉장히 디테일하게 하게 하나하나 하다보니 코드가 늘어나더라

// 실습코드

const rootElement = document.getElementById('root');
    const App = () => {
    
      // 상태관리 
      const [message, setMessage] = React.useState("");
      const [phoneNumber, setPhoneNumber] = React.useState("");
      
      // submit 시 Refresh 방지 및 입력 전화번호 알람      
      const handleSubmit = (event) => {
        event.preventDefault();
        alert(phoneNumber);
      }
      
      // Input에 값이 변할때마다, validation을 체크하는 handler 함수
      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 Number shoud start with 0");
        }
      };
      
      return (
        <form onSubmit={handleSubmit}>
          <label htmlFor="phone">Phone Number:</label>
          <br />
          <input 
            id="phone" 
            name="phone" 
            onChange={handleChange}
            value={phoneNumber}
            />
          <p>{message}</p>
          <br />
          <br />
          <button type="submit" disabled={ !phoneNumber.length > 0 || message !== "Phone Number is valid"}>Submit</button>
          <p>{phoneNumber}</p>
        </form>
      );
    }
  ReactDOM.render(<App />, document.getElementById("root"));

여기서 중요한 두가지는 validation 체크는 onChange로 관리하는게 좋고 controlled라는 개념이 있는데, 이건 Input의 value를 컴포넌트에서 직접 관리하는 것인데, 여기 실습에서는 애초에 잘못된 값이 입력되면 아예 입력이 안되게끔 해놨다.