React - form과 input 정리

About

관련된 예시 코드를 보고, 리액트에서 form과 input에 대해 알아두면 좋을 특성들을 정리해보고자 합니다.

import React , { useState } from 'react';

const Form = (props) => {
  const [info,setInfo]=useState({
  	name:'merry',
    	phone:'010-6666-2222'
  });
  const onChange = (e) => {
      e.preventDefault();
      setInfo(info => {
        const updated = { 
          ...info,
          [e.target.name]: e.target.value 
        };
        return updated;
      });      
    };
    return(
        <form>
            <input
              type="text"
              name="name"
              value={info.name}
              onChange={onChange}
              />
            <input
              type="text"
              name="phone"
              value={info.phone}
              onChange={onChange}
              />
        </form>
    );
}

• form 안에 여러가지 요소가 들어있을 땐 name 속성을 부여해 각각을 구분할 수 있도록 한다. 이는 event.target.name으로 조회 가능하다.

• value 속성을 통해 값을 부여한 경우, 타이핑을 해도 업데이트 되지 않으므로 onChange를 통해 업데이트 함수를 지정한다.

• onchange 이벤트는 input, select, textarea 요소에서 발생한다. input 이벤트와 달리 요소 값 각각의 모든 변경마다 반드시 발생하지는 않다.

• input에서는 onChange가 텍스트값이 바뀔 때마다 발생한다.

• onChange와 onSubmit에서의 event.preventDefault는 페이지가 리로딩되는 액션을 못하게 한다.

• form은 controlled components 중 하나로, (순수 HTML input에서 사용자가 자유롭게 입력한 데이터를 submit 같은 특정 이벤트가 발생했을 때 입력받은 데이터에 접근하는 방식과는 다르게) 리액트 form에서는 컴포넌트 안 state 데이터가 사용자가 화면에 보고 있는 데이터와 동일하도록 만드는 것을 권장한다.

• form은 입력할 때 마다 특정 부분이 리렌더링 되어도 리액트 자체적으로 효율적이게 DOM을 없데이트 해주기 때문에 성능은 크게 걱정하지 않아도 된다.

📝 Reference

https://ko.reactjs.org/docs/forms.html