[React] CustomHook

Main·2023년 7월 22일

React

목록 보기

5/31

CustomHook ?

커스텀 훅은 리액트 함수형 컴포넌트에서 로직을 재사용하기 위한 방법 중 하나입니다. 함수형 컴포넌트에서는 상태 관리와 라이프사이클 관리를 useState, useEffect와 같은 훅을 사용하여 처리합니다. 하지만 컴포넌트가 커지면서 특정 로직이 중복되거나 복잡해지는 경우가 발생할 수 있습니다. 이런 경우, 해당 로직을 커스텀 훅으로 추출하여 로직을 분리하고 재사용성을 높일 수 있습니다.

CustomHook의 장점

코드의 가독성이 증가합니다.
코드의 중복사용을 피할 수 있으며, 재사용성이 증가합니다.
코드의 유지 보수가 용이해집니다.
로직 분리가 가능해집니다.

useInput customhook 구현 코드

import { useState } from "react";

export const useInput = (initalValue, reg) => {
  const [value, setValue] = useState(initalValue);
  const [isValid, setIsvalid] = useState(true);

  const onChange = (e) => {
    const inputValue = e.target.value.trim();
    setValue(inputValue);
    setIsvalid(reg.test(inputValue));
  };

  return [value, onChange, isValid];
};

useInput 미적용 코드

export default function Customhook() {
  const [emailValue, setEmailValue] = useState("");
  const [emailValid, setEmailValid] = useState(true);
  const emailReg = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;

  const [pwValue, setPwValue] = useState("");
  const [pwValid, setPwValid] = useState(true);
  const pwReg = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[@#$%^&+=!])(?!.*\s).{8,16}$/;

  const onChangeValue = (value, setValue, setIsValid, reg) => {
    const inputValue = value.trim();
    setValue(inputValue);
    setIsValid(reg.test(inputValue));
  };
  return (
    <form>
      <div>
        <label htmlFor="email">이메일 : </label>
        <input
          id="email"
          type="text"
          value={emailValue}
          onChange={(e) =>
            onChangeValue(
              e.target.value,
              setEmailValue,
              setEmailValid,
              emailReg
            )
          }
        />
        {!emailValid && (
          <p style={{ color: "red", fontSize: "12px" }}>
            유효한 이메일을 입력하세요.
          </p>
        )}
      </div>
      <div>
        <label htmlFor="pw">비밀번호 : </label>
        <input
          id="pw"
          type="password"
          value={pwValue}
          onChange={(e) =>
            onChangeValue(e.target.value, setPwValue, setPwValid, pwReg)
          }
        />
        {!pwValid && (
          <p style={{ color: "red", fontSize: "12px" }}>
            8-16자 특수문자+영문+숫자 조합의 비밀번호를 입력해주세요.
          </p>
        )}
      </div>
    </form>
  );

useInput 적용 코드

import React from "react";
import { useInput } from "./useInput";

export default function Customhook() {
  const [emailValue, onChangeEmail, isEmailValid] = useInput(
    "",
    /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/
  );
  const [pwValue, onChangePw, isPwValid] = useInput(
    "",
    /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[@#$%^&+=!])(?!.*\s).{8,16}$/
  );
  return (
    <form>
      <div>
        <label htmlFor="email">이메일 : </label>
        <input id="email" value={emailValue} onChange={onChangeEmail} />
        {!isEmailValid && (
          <p style={{ color: "red", fontSize: "12px" }}>
            유효한 이메일을 입력하세요.
          </p>
        )}
      </div>

      <div>
        <label htmlFor="pw">비밀번호 : </label>
        <input id="pw" value={pwValue} onChange={onChangePw} />
        {!isPwValid && (
          <p style={{ color: "red", fontSize: "12px" }}>
            8-16자 특수문자+영문+숫자 조합의 비밀번호를 입력해주세요.
          </p>
        )}
      </div>
    </form>
  );
}
  );
}