분류 Reactjs

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

컨텐츠 정보

  • 조회 261 (작성일 )

본문

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

  const [firstNameFilled, setFirstNameFilled] = useState(false)  const [lastNameFilled, setLastNameFilled] = useState(false)  const [githubFilled, setGithubFilled] = useState(false)  const [twitterFilled, setTwitterFilled] = useState(false)  const [codepenFilled, setCodepenFilled] = useState(false)  const disableNameSection = !firstNameFilled || !lastNameFilled  const disableSocialSection = !githubFilled || !twitterFilled || !codepenFilled
  // 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"
              onChange={() => setFirstNameFilled(true)}            />
          </div>
          <div className="input-row">
            <label htmlFor="last-name">Last Name</label>
            <input
              id="last-name"
              type="text"
              onChange={() => setLastNameFilled(true)}            />
          </div>
          <div>
            <button
              type="submit"
              disabled={disableNameSection}            >
              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"
              onChange={() => setGithubFilled(true)}            />
          </div>
          <div className="input-row">
            <label htmlFor="twitter">Twitter Username</label>
            <input
              id="twitter"
              type="text"
              onChange={() => setTwitterFilled(true)}            />
          </div>
          <div className="input-row">
            <label htmlFor="codepen">Codepen Username</label>
            <input
              id="codepen"
              type="text"
              onChange={() => setCodepenFilled(true)}            />
          </div>
          <div>
            <button
              type="submit"
              disabled={disableSocialSection}            >
              Submit
            </button>
          </div>
        </form>
      )}

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


추가 된 코드는 간단합니다. 입력 요소에 변경 이벤트가 있는 경우 해당 부분을 "채워"표시하십시오. 필요한 모든 입력이 채워질 때까지 "다음"버튼을 비활성화 하십시오. 그러나 이 기능을 부분적으로 구현하기 위해 많은 코드를 추가했습니다. 사용자가 입력에 텍스트를 입력 한 후 즉시 지우면 어떻게됩니까? 우리는 이미 그 입력을 "채워진"것으로 표시했습니다. 이를 수정하려면 모든 입력에 대해 이 경우를 처리하여 일을 좀 더 건조하게 유지하는 함수를 작성하는 것이 좋습니다.


모든 입력에 대해 입력 변경 이벤트를 처리 할 수 있는 함수를 작성하는 데 시간을 내는 것은 조금 뒤로 물러나 재사용 가능성에 대해 생각할 수 있는 기회입니다. 이것은 모든 필수 입력이 채워 졌는지 확인하려는 프로젝트 또는 구성 요소의 유일한 형식이 아닐 수도 있습니다.


로컬 컴포넌트에서 React 후크 메소드를 사용할 때마다 해당 로직을 다른 곳에서 재사용 할 수 있는 경우 사용자 정의 후크 함수를 작성하는 것이 잠재적 인 가능성입니다. 


이것이 반드시 당신이 항상 해야 한다는 것을 의미하지는 않습니다. 조기 최적화는 부정적인 영향을 미치며 사용자 나 팀에게 다른 방법으로 비용을 청구 할 수 있습니다. 그러나 여러 구성 요소에 걸쳐 패턴이 형성되고 해당 논리를 사용자 정의 React 후크 기능으로 추출 할 수 있다는 것은 매우 강력합니다. 이것이 우리가 이 경우에 할 일입니다.


커스텀 훅 작성 


마지막 코드 예제에서 각 입력 요소에 대한 기능을 요약하면 다음과 같습니다.

  • 입력의 "채워진"상태를 기록으로 유지
  • 입력이 속한 섹션에 해당하는 "계속"버튼의 비활성화 상태를 기록하십시오.

하나의 매개 변수 인 필수 React 후크를 작성하여 필수 필드의 ID 배열을 작성하여 이 모든 것을 수행 할 수 있습니다. 함수는 이벤트를 보고 이벤트의 대상 ID가 필수 필드 중 하나와 일치하는지 판별 한 다음 해당 ID를 "채워진 필드"배열에 추가하여 이벤트 핸들러를 제공하여 필드 레코드를 유지할 수 있습니다. 텍스트 입력 필드에 대한 구현 방법은 다음과 같습니다.


여기에 표시되지 않았지만 명심해야 합니다. 양식이 미리 채워져 있고 사용자가 편집중인 경우가 있을 수 있습니다. 로드에 채워진 필드를 확인하기 위해 효과 후크를 사용할 수 있습니다.