Form

Form : 사용자로부터 입력을 받기 위해 사용

제어컴포넌트 (Controlled Components)

React에 의해 값이 제어되는 입력 폼 엘리먼트
사용자의 입력을 직접적으로 제어할수있다. = 입력양식을 내가 원하는대로 받을수있다.

// value를 리액트 엘리먼트에 가져다 넣고 handleChange로 변경되면 변경된값을 넣어주게 제어
const nameForm = (props) => {
  const [value, setvalue] = useState('');
  const handleChange = (e) => {
    setValue(e.target.value);
  };
  const handleSubmit = (e) => {
  	e.preventDefault();
  }
  
  return (
    <form onSubmit={handleSubmit}>
      <label>
        이름 : <input type="text" value={value} onChange={handleChange}/>
      </label>
      <button type="submit">제출</button>
    <form>
  )
};

textarea : 여러줄에 걸쳐 긴 텍스트를 입력받기 위한 html태그
select : 드롭다운 목록을 보여주기 위한 html태그
input type="text"
위 3가지 모두 제어 컴포넌트를 구현하는데 value어트리뷰트를 사용한다.

select 태그에 multiple옵션을 사용하면 value어트리뷰트에 배열을 전달할 수 있다.
<select multiple={true} value={['B','C']}>

select 태그

import React, { useState } from "react";

const Ex = (props) => {
const [value, setValue] = useState("orange");

const handleChange = (e) => {
  setValue(e.target.value);
};
const handleSubmit = (e) => {
  alert("선택한과일 " + value);
  e.preventDefault();
};

return (
  <form onSubmit={handleSubmit}>
    <label>
      선택하세요
      <select value={value} onChange={handleChange}>
        <option value="orange">orange</option>
        <option value="apple">apple</option>
        <option value="grape">grape</option>
      </select>
    </label>
    <button type="submit">제출</button>
  </form>
);
};

export default Ex;

input type="file" : 디바이스의 저장장치로부터 사용자가 하나 또는 여러개의 파일을 선택할수있게 해주는 html태그
값이 리액트의 통제를 받지않는다.

input null value
제어 컴포넌트에 value prop을 넣으면 의도하지 않는 한 사용자가 변경할 수 없다.
value prop은 넣되 자유롭게 입력하고싶으면 undefined 나 null을 넣는다.
hi로 정해져있어서 값을 바꿀수없는 상태였다가, 타이머에의해 1초뒤에 null이므로 입력가능할수있다.

ReactDOM.render(<input value="hi" />, rootNode);
  
setTimeout(function(){
  ReactDOM.render(<input value={null} />,rootNode);
},1000);