폼(form)

_mak_______·2022년 11월 24일
0

React Studybook

목록 보기
5/11

제어 컴포넌트

✔ React에 의해 값이 제어되는 입력 폼 엘리먼트.
✔ 제어 컴포넌트의 값은 state, setState, useState 로 관리된다.
✔ < input type="file" >은 값이 읽기 전용이므로 비제어 컴포넌트다.

function SignUp(props){
  const [name, setName] = useState("");
  const [gender, setGender] = useState("");
  const [intro, setIntro] = useState("");

  const handleChangeName = (event) => {
    setName(event.target.value);
  };

  const handleChangeGender = (event) => {
    setGender(event.target.value);
  };

  const handleChangeIntro = (event) => {
    setIntro(event.target.value);
  };

  const handleSubmit = (event) => {
    alert(`이름: ${name}, 성별: ${gender}, 소개: ${intro}`);
    event.preventDefault();
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        이름: <input type="text" value={name} onChange={handleChangeName} />
      </label>

      <label>
        성별: 
        <select value={gender} onChange={handleChangeGender}>
          <option value="남자">남자</option>
          <option value="여자">여자</option>
        </select>
      </label>

      <label>
        소개: <textarea value={intro} onChange={handleChangeIntro}></textarea>
      </label>

      <button type="submit">제출</button>
    </form>
  );
}

< input type="text" >, < textarea >, < select > 태그들을 제어 컴포넌트로 만드는 방식은 모두 비슷하다. 모두 value라는 attribute를 통해서 값을 전달하고 onChange에서 setValue() 함수를 사용하여 값을 업데이트 한다.

비제어 컴포넌트

대부분 경우에 폼을 구현하는데 제어 컴포넌트를 사용하는 것이 좋다. 모든 state 업데이트에 대한 이벤트 핸들러를 작성하는 대신 비제어 컴포넌트를 만들려면 ref를 사용하여 DOM에서 폼 값을 가져올 수 있다.

function Profile(props) {
  const nameInput = useRef();
  const fileInput = useRef();

  const handleSubmit = (event) => {
    alert(`이름: ${nameInput.current.value}, 프로필 사진: ${fileInput.current.files[0].name}`);
    event.preventDefault();
  }

  return(
    <form onSubmit={handleSubmit}>
      <label>
        이름: <input type="text" ref={nameInput} />
      </label>

      <label>
        프로필 사진: <input type="file" ref={fileInput} />
      </label>

      <button type="submit">제출</button>
    </form>
  );
}

유효성 검사, 방문한 필드 추적 및 폼 제출 처리와 같은 완벽한 해결을 원한다면 Formik이 대중적인 선택 중 하나.

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

0개의 댓글