[React] Form

form element

<input> , <textarea>, <select>

→ 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트

React에서 변경할 수 있는 state는 일반적으로 컴포넌트의 state 속성에 관리되고 setState()에 의해 업데이트됨

제어 컴포넌트

React에 의해 값이 제어되는 입력 폼 엘리먼트를 제어 컴포넌트로 만들어 사용

→ 사용자가 입력한 값과 저장되는 값이 실시간으로 동기화
→ 상태가 바뀔때마다 렌더링

<input> 태그 활용 예

export default function NameForm() {
  const [value, setValue] = useState('');

  const handleChange = (e) => {
    setValue(e.target.value);
  }

  const handleSubmit = (e) => {
    alert('A name was submitted: ' + value);
    e.preventDefault();
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={value} onChange={handleChange} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}

단, input의 type이 file과 같은 readonly일 경우 비제어 컴포넌트로 여겨짐

<select> 태그의 활용 예시

export default function FlavorForm() {
	const [value, setValue] = useState('coconut');

  const handleChange = (e) => {
    setValue(e.target.value);
  }

  const handleSubmit = (e) => {
    alert('Your favorite flavor is: ' + value);
    e.preventDefault();
  }

  return (
      <form onSubmit={handleSubmit}>
        <label>
          Pick your favorite flavor:
          <select value={value} onChange={handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
      </form>
  );
}

※ multiple 옵션을 허용한다면 value에 배열을 전달할 수 있음

<select multiple={true} value={['B', 'C']}>

비제어 컴포넌트 방식

• 제어 컴포넌트의 경우 사용자가 입력을 하는 액션을 취할때마다 리렌더링 발생
• 비제어 컴포넌트는 사용자가 직접 트리거 하기 전까지는 리렌더링X, 동기화 X ex) 제어 컴포넌트: 폼에 값을 한 자 한 자 입력할 때마다 리렌더링
  
• value가 아닌 ref 사용

export default function App() {
  const inputRef = useRef(); 
  const onClick = () => {
    console.log(inputRef.current.value);
  };

  return (
    <div className="App">
      <input ref={inputRef} />
      <button type="submit" onClick={onClick}>
        전송
      </button>
    </div>
  );
}