[React] (리액트 공부하기 29) Form 태그와 다양한 입력 요소

1. 기본적인 form 태그

• form 태그는 HTML에서 사용자의 입력을 서버에 제출(submit)하기 위해 사용된다.
• 예제 코드에서 사용된 input 태그를 통해 사용자는 텍스트를 입력하고, button 태그의 타입을 submit으로 설정하여 제출할 수 있다.
• 이 방식은 HTML 고유의 기능이지만, React와 함께 사용할 때는 사용자 입력을 동적으로 관리하기 위해 제어 컴포넌트(Controllered Component)가 필요하다.

---

2. 제어 컴포넌트(Controlled Component)

• 제어 컴포넌트는 입력 필드(input, textaread, select 등)의 값을 React의 state로 관리하는 방식을 말한다.
• 사용자가 값을 변경할 때마다 onChange 이벤트가 발생하며, 해당 값을 state에 업데이트 한다.
• 이렇게 하면 React가 컴포넌트의 상태를 완전히 제어하고, 동적으로 값을 업데이트할 수 있다.

예제:

function NameForm(props) {
  const [value, setValue] = useState('');
  
  const handleChange = (event) => {
    setValue(event.target.value); // 입력된 값이 상태에 저장됨
  };

  const handleSubmit = (event) => {
    alert('입력한 이름: ' + value);
    event.preventDefault(); // 기본 제출 동작을 막음
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        이름:
        <input type="text" value={value} onChange={handleChange} />
      </label>
      <button type="submit">제출</button>
    </form>
  );
}

---

3. textarea 태그

• 긴 텍스트 입력을 받을 때 사용하는 HTML 태그
• HTML에서는 텍스트를 <textarea> 태그 사이에 입력하지만, React에서는 value 속성을 통해 관리해야 한다.
• 위 방식과 동일하게 state와 onChange 이벤트를 사용해 값을 제어한다.

예제:

function RequestForm(props) {
  const [value, setValue] = useState('요청사항을 입력하세요.');
  
  const handleChange = (event) => {
    setValue(event.target.value);
  };
  
  return (
    <form>
      <label>
        요청사항:
        <textarea value={value} onChange={handleChange} />
      </label>
    </form>
  );
}

---

4. select 태그

• 옵션 목록을 제공하는 드롭다운 메뉴를 생성하는 데 사용된다.
• HTML에서는 selected 속성을 사용해 선택된 값을 지정하지만, React에서는 value 속성을 통해 선택된 값을 제어한다.

예제:

function FruitSelect(props) {
  const [value, setValue] = useState('grape');
  
  const handleChange = (event) => {
    setValue(event.target.value);
  };
  
  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>
    </form>
  );
}

---

5. file 태그

• 사용자가 파일을 선택할 수 있는 입력 요소
• file input은 비제어 컴포넌트로 간주되며, React state로 값을 관리하지 않는다.
• 대신 파일 데이터는 javaScript의 File API를 통해 처리된다.

예제:

function FileInput() {
  const fileInput = useRef(null);
  
  const handleSubmit = (event) => {
    event.prevenDefault();
    alert(`선택된 파일: ${fileInput.current.files[0].name}`);
  };
  
  return (
    <form onSubmit={handleSubmit}>
      <label>
        파일 업로드:
        <input type="file" ref={fileInput} />
      </label>
      <button type="submit">제출</button>
    </form>
  );
}