나는 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의 제어된 입력이지만 이와 같은 입력의 경우 하이브리드 접근 방식을 사용할 수 있습니다.
  • 양식의 모든 입력 정의
  • 제어되는 입력에 대해서만 쓰기 useStateonChange 처리기
  • 그런 다음 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... 마무리입니다!
    이 게시물이 마음에 드셨다면 좋아요 🙃
    하지만 사랑했다면? 남자 당신은 나를 따라야 해요 😉

    지금은 안녕!

    좋은 웹페이지 즐겨찾기