나는 React.js에서 계속 잘못된 방식으로 Forms를 만들고 있었습니다 🤔

소개

가입 양식을 만들 때 수십 개의 useStates를 만든 다음 해당 useStates에 대한 수십 개의 onChange 핸들러를 만드는 것을 발견했습니다. 이런거 🤮



이봐, 나는 삽화를 위해 이것을 쓰는 것조차 졸려!

Also, you're welcome, for blasting your eyes with that monstrous One Light theme code snippet. Some amount of white is good for attention aye! 😉

그래서... 요점을 알겠습니다. 이 게시물에서 저는 이 문제를 우아한 방식으로 해결하려고 노력할 것입니다. 보려고!)

시작하자!

이전 게시물 암호

export default function App() {

  // NOT a even a SINGLE useState babyyyyyyy! 😎

  const submitForm = (e) => {
    e.preventDefault();

    const formData = new FormData(e.target);
    const inputObject = Object.fromEntries(formData); // convert the FormData object to a JSON object

    console.log(inputObject);
  };

  return (
    <div className="App">
      <form onSubmit={submitForm}>
        <div>
          <input name="email" placeholder="email" />
        </div>

        <div>
          <input name="password" placeholder="password" />
        </div>

        <div>
          <input name="phone" placeholder="phone" />
        </div>

        <br />

        <button type="submit">Submit</button>
      </form>
    </div>
  );
}

You can try this code & tinker with it in the same browser as you're viewing this post, thanks to codesandbox (code link)

React를 처음 접하는 초보자 친구들을 위해 여기서 우리가 한 일은 다음과 같습니다.

입력 필드를 실제 HTMLform 요소

로 래핑합니다.

각 입력 필드의 name 속성을 정의합니다(무엇이든 될 수 있으며 HTML은 이 속성을 사용하여 입력 값의 이름을 지정합니다)

onClick 핸들러가 없지만 type 속성이 'submit'로 설정된 버튼을 만듭니다.

onSubmit 요소 아래에 form 핸들러 정의

사용자가 입력에 세부 정보를 입력한 후 양식에 선언된 type='submit'가 있는 버튼을 클릭하면 HTMLform 요소가 해당 onSubmit 핸들러, 즉 우리의 submitForm 함수를 호출합니다.

const submitForm = (e) => {
  // 1
  e.preventDefault();

  // 2
  const formData = new FormData(e.target);

  // 3
  const inputObject = Object.fromEntries(formData); // convert the FormData object to a JSON object
  console.log(inputObject);
};

이제 여기서 3가지 작업을 수행했습니다.

HTML preventDefault 유형의 FormEvent 메서드를 호출하고 HTML Goddess 자신이 함수에 인수로 전달했습니다(우리는 이름을 e 로 지정했습니다). 이 기능은 양식 입력 값을 페이로드로 사용하여 동일한 페이지의 URL에 대한 GET 요청을 자동으로 만들고 페이지를 다시 로드하는 것을 포함하는 제출 후 양식이 기본 동작을 계속하는 것을 방지합니다(우리는 자체 양식을 정의하고 있기 때문에 원하지 않습니다). 페이지 다시 로드로 인해 기능이 중단되는 제출 논리)

양식 요소(e.target 참조)를 FormData 생성자에 전달하고 이를 formData 상수에 저장합니다.
이것은 입력 요소를 가져 와서 키가 입력에 대해 name 속성에서 정의한 키 값 쌍으로 구문 분석하고 값은 해당 입력 텍스트가 됩니다. 모든 다른 입력 텍스트 값은 다음과 같은 이름을 사용하여 검색할 수 있습니다.

// quite similar to the map syntax to get a key ( map.get("key") )
const email = formData.get("email")

정말 마법같고 우아하지 않나요? HTML은 양식 입력 값을 구문 분석하는 것부터 데이터를 수집하고 지도와 같은 구조로 반환하는 것까지 모든 작업을 수행합니다 🪄.=

3.마지막으로 입력 값이 있는 FormData 개체를 Object.fromEntries( ... )가 있는 일반 JavaScript 개체로 변환합니다. 이제 생성된 개체를 로깅하면 다음과 같은 출력이 제공됩니다.



효과가있다!

하지만! 그리고 그것은 크지만 (말장난 의도), 이 접근 방식의 단점은 제어 입력을 작성할 수 없다는 것입니다. 이를 위해 useState & 해당 onChange 핸들러를 선언해야 합니다.

"도대체 제어 입력이란 무엇입니까?"

이 예를 살펴보십시오



이것은 React js의 제어된 입력이지만 이와 같은 입력의 경우 하이브리드 접근 방식을 사용할 수 있습니다.

양식의 모든 입력 정의

제어되는 입력에 대해서만 쓰기 useState 및 onChange 처리기

그런 다음 formData의 값을 해당 제어 상태 변수로 수동으로 설정합니다

.

P.S:
Seeing HTML automatically handling inputs for us appears to be some kind of magic and to be honest, I hate when magic is occurring BUT some amount of magic is bearable for the sake of making the developer experience good 👌🏻

Aaaand... 마무리입니다!
이 게시물이 마음에 드셨다면 좋아요 🙃
하지만 사랑했다면? 남자 당신은 나를 따라야 해요 😉

지금은 안녕!