Form

사용자에게서 무언가를 입력받기 위해 쓰는 양식

기존 HTML Form

코드양도 많고, JS와 연결하기도 귀찮다.

<form>
  <label>
    이름:
    <input type="text" name="name" />
  </label>
  <button type="submit">제출</button>
</form>

Controlled Components

그 값이 React의 통제를 받는 Input Form Element

예제

function NameForm(props) {
  cosnt [value, setValue] = useState('');
  
  const handleChange = (event) => {
    setValue(event.target.value);
  }
  
  const handleSubmit = (event) => {
    alert('입력한 이름: ' + value);
    event.preventDefault();
  }
  
  return (
    <form>
      <label>
        이름:
        <input type="text" value={value} onChange={handleChange} />
      </label>
      <button type="submit">제출</button>
    </form>
  );
}

Form의 종류

Input

type에 따라 다양한 종류의 데이터를 입력받을 수 있음

Textarea

여러 줄에 걸처 텍스트를 입력받을 수 있는 요소

function NameForm(props) {
  cosnt [value, setValue] = useState('요청사항을 입력하세요.');
  
  const handleChange = (event) => {
    setValue(event.target.value);
  }
  
  const handleSubmit = (event) => {
    alert('입력한 요청사항: ' + value);
    event.preventDefault();
  }
  
  return (
    <form>
      <label>
        요청사항:
        <textarea value={value} onChange={handleChange} />
      </label>
      <button type="submit">제출</button>
    </form>
  );
}

Select

Dropdown 목록을 보여주는 요소

function NameForm(props) {
  cosnt [value, setValue] = useState('grape');
  
  const handleChange = (event) => {
    setValue(event.target.value);
  }
  
  const handleSubmit = (event) => {
    alert('선택한 과일: ' + value);
    event.preventDefault();
  }
  
  return (
    <form>
      <label>
        과일을 선택하세요:
        <select value={value} onChange={handleChange}>
          <option value="apple">사과</option>
          <option value="banana">바나나</option>
          <option value="grape">포도</option>
          <option value="watermelon">수박</option>
        </select>
      </label>
      <button type="submit">제출</button>
    </form>
  );
}

여러 개의 옵션을 선택하도록 하려면?

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

File Input

기존의 Input 태그에서 type을 "file"로 설정하면, 현재 디바이스의 저장 장치에서 파일을 선택할 수 있게 해준다.

해당 Form은 Uncontrolled Component로, 리액트가 통제할 수 없다.

<input type="file">...</input>

Multiple Input

여러 종류의 Input을 받으려면, 그에 맞춰 State를 할당하면 된다.

function Reservation(props) {
  const [haveBreakfast, setHaveBreakfast] = useState(true);
  const [numberOfGuest, setNumberOfGuest] = useState(2);
  
  const handleSubmit = (event) => {
    alert('아침식사 여부: ${haveBreakfast}, 방문객 수: ${numberOfGuest}');
    event.preventDefault();
  }
  
  return (
    <form>
      <label>
        아침식사 여부:
        <input
          type="checkbox"
          checked={haveBreakfast}
          onChange={(event) =>{
            setHaveBreakfast(event.target.checked);
          }} />
      </label>
      <br />
      <label>
        방문객 수:
        <input
          type="number"
          checked={numberOfGuest}
          onChange={(event) =>{
            setNumberOfGuest(event.target.value);
          }} />
      </label>
      <button type="submit">제출</button>
    </form>
  );
}

Input Null Value
value prop를 정해진 값으로 넣으면, 코드를 수정하지 않는 한 입력값을 바꿀 수 없다. 따라서 value prop를 자유롭게 입력하게끔 만들고 싶다면 undefined 또는 null을 넣어주면 된다.

ReactDOM.render(<input value="hi" />, rootNode);

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

---

Referance

[인프런] 처음 만난 리액트(React) 강의 - 소플