REACT ⑩ Forms

💡 REACT FORMS
React에서 사용하는 표준 방법
Controlled Components 에 대한 정리입니다.

Controlled Components

• 대표적으로 컨트롤이 가능한 Form Component 태그 :
  <input>, <textarea>,<select>
• React에서는 각 컴포넌트의 state는 setState()에 업데이트한다.
• onChange()를 통해 기존 state에서 변경 된 값을 setState()로 업데이트 해준다.
• <select>태그의 경우 다중 선택을 할 수 있다.

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

Uncontrolled Component

• <input type="file">
• value가 읽기 전용인 경우, 컴포넌트는 컨트롤이 리액트에서는 어렵기 때문에 다른 방법을 사용해야 한다. (DOM에서 핸들링을 해준다)
  👉 ref를 사용해야하는데 아직 배우지 않아서 추후에 업데이트 예정

예시

const Create = () => {
  const [value, setValue] = useState({ title: "", body: "", author: "" });

  const handleChange = (e) => {
    const updateValue = e.target.value;
    setValue({ ...value, [e.target.name]: updateValue });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log(value);
  };

  return (
    <div className="create">
      <h2>Add a New Blog</h2>
      <form className="blog-form" onSubmit={handleSubmit}>
        <label htmlFor="blog-title">Blog Title: </label>
        <input
          id="blog-title"
          type="text"
          name="title"
          required
          onChange={handleChange}
        />
        <label htmlFor="blog-body">Blog body: </label>
        <textarea
          name="body"
          id="blog-body"
          required
          onChange={handleChange}
        ></textarea>
        <label htmlFor="blog-author">Blog author: </label>
        <select name="author" id="blog-author" onChange={handleChange}>
          <option value="kim">kim</option>
          <option value="lee">lee</option>
          <option value="park">park</option>
        </select>
        <button type="submit">Add Blog</button>
      </form>
    </div>
  );
};

• useForm()이라는 커스텀 훅을 만드는 경우도 많은 거 같다.

그외

이에 관련된 라이브러리 / 웹사이트 모음

• React Hook Form
• react-hook-form 사용방법
• useForm hook 만들기