분류 Reactjs

자신 만의 React 커스텀 훅 작성 (1)

컨텐츠 정보

  • 조회 328 (작성일 )

본문

후크는 지금 React에서 뜨겁습니다. 후크 useState, useEffect, useRef 등을 사용하여 React 컴포넌트를 작성하고 있을 수 있지만 실제 후크 기능은 하나의 컴포넌트에서 로직을 추출하여 애플리케이션 전체의 다른 컴포넌트에서 해당 로직을 공유 할 수 있습니다. 사용자 정의 React 후크를 작성하는 방법과 시기를 이해하면 재사용 가능한 논리를 추출하고 코드를 약간 정리할 수 있습니다.


https://tvernon.tech/blog/react-custom-hook-for-forms 


몇 가지 코드를 살펴보고 사용자 정의 React 후크가 어떻게 도움이 될 수 있는지 살펴 보겠습니다.


React의 양식 문제 


React의 양식은 잘 알려진 좌절의 원천입니다. 라이브러리로서 React는 이를 해결해야 할 목표가 없습니다. 

일부 문서가 제공되었지만 실제로는 입력 요소의 변경 사항을 처리하고 로컬 상태에서 해당 업데이트를 관리하는 가장 간단한 경우를 보여줍니다. 

React의 철저한 솔루션 부재는 실제로 다양한 프로젝트의 다양한 요구에 따라 커뮤니티가 모범 사례를 해결하도록 초대합니다. 

React 문서 자체는 양식에 대한 "완전한"솔루션을 찾고 있다면 다른 타사 라이브러리를 사용하여 React와 함께 사용하는 것이 좋습니다. 

이러한 추가 라이브러리는 React에서 양식을 구현할 때 커뮤니티가 수렴 한 모범 사례 중 일부입니다.


오늘날 사용 가능한 양식에 대한 본격적인 솔루션은 훌륭하지만 때로는 Formik, Final Form을 설치하거나 [여러분이 선택한 양식 라이브러리를 삽입]하는 데 어려움을 겪을 가치가 없습니다. 

프로젝트 요구 사항 또는 번들 예산에 따라 양식 처리에 React 이외의 다른 것을 사용하는 것은 적합하지 않을 수 있습니다. 

개념 증명을 해킹하고 솔루션을 아직 과도하게 엔지니어링 하려는 경우 아직 확실하지 않습니다. 

이 기사는 React (및 일부 사용자 정의 후크)가 필요한 모든 것을 보여줍니다.


다단계 양식 예 


다음 섹션을 보거나 채우기 전에 한 섹션이 필요한 다단계 양식의 경우를 고려하십시오. 필요한 모든 입력이 채워질 때까지 양식의 다음 단계로 진행하는 버튼을 클릭 할 수 없습니다. 입력에서만 HTML5 필수 속성을 사용하면 이 기능을 사용할 수 없습니다. 버튼을 제어하기 위한 상태가 없는 구성 요소는 다음과 같습니다.


function MultiStepForm() {
  const [formIndex, setFormIndex] = useState(0)

  // Advance through the multiple stages of the signup
  function handleFormSubmit(event) {
    event.preventDefault()
    setFormIndex(formIndex + 1)
  }

  return (
    <>
      {/* First section of the form */}
      {formIndex === 0 && (
        <form onSubmit={handleFormSubmit} autoComplete="off">
          <p>Your name</p>
          <div className="input-row">
            <label htmlFor="first-name">First Name</label>
            <input id="first-name" type="text" />
          </div>
          <div className="input-row">
            <label htmlFor="last-name">Last Name</label>
            <input id="last-name" type="text" />
          </div>
          <div>
            <button type="submit">Continue</button>
          </div>
        </form>
      )}

      {/* Second section of the form */}
      {formIndex === 1 && (
        <form onSubmit={handleFormSubmit} autoComplete="off">
          <p>Your social profiles</p>
          <div className="input-row">
            <label htmlFor="github">GitHub Username</label>
            <input id="github" type="text" />
          </div>
          <div className="input-row">
            <label htmlFor="twitter">Twitter Username</label>
            <input id="twitter" type="text" />
          </div>
          <div className="input-row">
            <label htmlFor="codepen">Codepen Username</label>
            <input id="codepen" type="text" />
          </div>
          <div>
            <button type="submit">Submit</button>
          </div>
        </form>
      )}

      {/* Thank you message */}
      {formIndex === 2 && (
        <div>
          <p>Thanks!</p>
          <button type="button" onClick={() => setFormIndex(0)}>
            Back to start
          </button>
        </div>
      )}
    </>
  )
}



위의 코드는 가입에 필요한 사용자 데이터의 다른 측면을 나타내는 두 개의 패널입니다. 두 패널이 모두 채워지면 "감사합니다"메시지가 나타나고 사용자는 처음으로 돌아갑니다. 이것은 단지 예일 뿐입니다. 이 코드의 문제점은 사용자가 각 입력 필드를 채울 때까지 "계속"및 "제출"버튼을 비활성화 하려는 것입니다. 로컬 상태를 추가해야 합니다.


코드를 따르고 싶다면 (예와 함께) 여기에서 CodeSandbox 데모를 만들었습니다.


React에서 형태의 고통을 느끼기 


React에는 입력 요소에 대한 두 가지 접근 방식이 있습니다 : 제어 및 비 제어. 제어 된 접근 방식을 사용하면 각 입력 요소에 연결된 onChange 리스너가 있으며 핸들러는 해당 요소의 value 속성을 업데이트합니다. 

각 변경 사항은 로컬 상태의 React에 의해 처리됩니다. 반면에 제어되지 않은 입력은 이름에서 알 수 있듯이 모든 변경 사항은 모든 웹 사이트에서와 마찬가지로 DOM에 의해 처리되며 React는 현재 상황을 제어하지 않습니다. 

React 애플리케이션이 값을 볼 수 있도록 일반적으로 양식에 첨부 된 onSubmit 핸들러가 있으므로 React가 입력 값을 가져 와서 수행 할 조치를 결정할 수 있습니다.


React는 각 업데이트 이벤트가 발생하는 시점을 보고 해당 이벤트를 처리하는 방법을 완전히 제어하므로 제어 된 입력 방식은 훨씬 강력한 성능을 제공합니다. 또한 React 문서에서 일반적으로 권장하는 접근 방식입니다. 그러나 지루할 수 있는 더 많은 코드가 필요합니다. 

이 예와 입력 수에 대해서는 제어되지 않은 입력 방법을 적용하는 것이 더 간단 할 수 있습니다. 이에 대한 자세한 내용을 보려면 제어되지 않은 구성 요소에 대한 공식 React 문서를 시작하는 것이 좋습니다.


다음은 사용자를 다음 부분으로 이동 시키는 버튼을 비활성화하는 것에 대한 반 제어되지 않은 검사를 통해 다단계 양식의 구현입니다. (각 입력에 여전히 onChange 리스너가 있지만 부울 상태를 설정하기 위해서만 반 제어되지 않는다고 말합니다.) 여기에는 많은 코드가 있으므로 강조 표시된 줄에 추가 된 내용에 주의 하십시오.