react-hook-form 사용기

이번 실전프로젝트에서는 react-hook-form 이라는 라이브러리를 사용해보기로했다.

항상 로그인이나 회원가입창을 만들때에, input 태그에 중복된 코드가 너무 거슬렸다. 그리고 제어컴포넌트로써 인풋창에 한 글자씩 타이핑될때마다 렌더링되는 것도 거슬렸다. 그리하여 이 모든 것을 해결해줄 react-hook-form을 쓰기로 했다.

 

 

 

아래는 기존의 회원가입 코드이다.

<AddTodoCtn>
          <AddTodoCtnArea>
            <AddTodoBox>
              <AddTodoTitle>아이디</AddTodoTitle>
              <AddTodoTextarea
                value={Signup.loginId}
                name="loginId"
                onChange={onChangehandler}
              />
            </AddTodoBox>
            <AddTodoBox>
              {isEdit && (
                <>
                  <AddTodoTitle>닉네임</AddTodoTitle>
                  <AddTodoInput
                    // maxLength={5}
                    placeholder="5글자 이내"
                    value={Signup.nickname}
                    name="nickname"
                    onChange={onChangehandler}
                  />
                </>
              )}
            </AddTodoBox>
            <AddTodoBox>
              <AddTodoTitle>비밀번호</AddTodoTitle>
              <AddTodoTextarea
                type="password"
                value={Signup.password}
                name="password"
                onChange={onChangehandler}
                placeholder="8자리이상, 특수문자 1개이상"
              />
            </AddTodoBox>
            <AddTodoBox>
              {isEdit && (
                <>
                  <AddTodoTitle>비밀번호 재확인</AddTodoTitle>
                  <AddTodoTextarea
                    type="password"
                    value={Signup.confirm}
                    name="confirm"
                    onChange={onChangehandler}
                  />
                </>
              )}
            </AddTodoBox>
          </AddTodoCtnArea>

 

 

 

 

 

아래는 react-hook-form을 사용하여 나타낸 회원가입코드이다. 

helper text를 띄움에도 불구하고, 훨씬 짧고 간결하게 코드를 작성할 수 있다.

<SignUpCtn onSubmit={handleSubmit(onSubmit)}>
          {" "}
          <SignUpBox>
            <SignUpInput placeholder="아이디" {...register("userId")} />{" "}
            {errors.userId && (
              <small role="alert">{errors.userId.message}</small>
            )}
          </SignUpBox>{" "}
          <SignUpBox>
            <SignUpInput placeholder="닉네임" {...register("nickName")} />
            {errors.nickName && (
              <small role="alert">{errors.nickName.message}</small>
            )}
          </SignUpBox>
          <SignUpBox>
            <SignUpInput
              placeholder="비밀번호"
              id="password"
              type="password"
              {...register("password")}
            />
            {errors.password && (
              <small role="alert">{errors.password.message}</small>
            )}
          </SignUpBox>
          <SignUpBox>
            <SignUpInput
              placeholder="비밀번호확인"
              id="confirm"
              type="password"
              {...register("confirm")}
            />
            {errors.confirm && (
              <small role="alert">{errors.confirm.message}</small>
            )}
          </SignUpBox>
        </SignUpCtn>

 

자세한 사용법은 공식문서를 통하여, 배우는 것이 정확하고 빠를 것 같아서 생략한다.

 

 

 

 

외부라이브리러를 react-hook-form과 같이 사용하고 싶다면?

 

필자는 예시로, datepicker를 리액트훅폼과 함께 사용하고 싶었고 방법을 찾던 중 react-hook-form에 controller를 이용하게 되었다.

 

아래와 같이 Controller 태그 안에 사용하고 싶은 라이브러리를 집어넣으면, render안에 있는 prop들을 react-hook-form과 함께 사용할 수 있게된다.

<Controller
              control={control}
              name="time"
              format="YYYY-MM-DD"
              render={({ field: { onChange } }) => (
                <Datepicker
                  select="range"
                  controls={["date", "time"]}
                  onChange={(value) => {
                    onChange(value);
                  }}
                />
              )}
            />

 

 

 

마지막으로 공식문서 링크 첨부해드립니다.

https://react-hook-form.com/

Home