[React.js] - Custom Hooks

👨🏻‍💻 Custom Hooks

---

• ✅ 프로젝트/ 서비스 내에서 다양한 컴포넌트에서 자주 사용하게 되는 값/ 함수를 cunstom Hooks로 미리 만들어두고 사용하는 방식

• 예: loading :boolean, validateMode :boolean 과 같이 조건부 렌더링을 위한 값

case :

• components/common/input.tsx : 커먼 컴포넌트 input 에서 redux 상태인 validateMode : boolean 값이 true 땐 인풋에 대한 에러 처리를 할 수 있는 조건부 렌더링 구현

hooks/useValidateMode.ts

import { useDispatch } from "react-redux";
import { useSelector } from "../store";
import { commonActions } from "../store/common";

export default () => {
  const dispatch = useDispatch();
  const validateMode = useSelector((store) => store.common.validateMode);

  const setValidateMode = (value: boolean) =>
    dispatch(commonActions.setValidateMode(value));

  return { validateMode, setValidateMode };
};

• input 을 사용하는 모든 컴포넌트에서 사용하기 위한 커스텀 훅

• validateMode : useSelector를 통해 접근

• setValidateMode : useDispatch를 통해 접근

components/common/input.tsx :

const Input: FC<IProps> = ({
  isValid = false,
  useValidation = true,
  errMessage,
  ...props
}) => {
  const validateMode = useSelector((store) => store.common.validateMode);

  return (
    <Container isValid={isValid} useValidation={validateMode && useValidation}>
      <input {...props} />
      {useValidation && validateMode && !isValid && errMessage && (
        <p className="input-err-message">{errMessage}</p>
      )}
    </Container>
  );
};

• useValidation = true : 기본적으로 false 값을 가지고 있지만 useValidation={validateMode && useValidation} 일때 true 반환

• isValid = false : 기본적으로 false 값을 가지지만 prop로 받는 값이 null이 아닐 떄 true

<Input /> component example:

<Input
  placeholder="이메일주소"
  type="email"
  name="email"
  value={email}
  onChange={onChangeEmail}
  useValidation
  isValid={!!email}
  errMessage="이메일이 필요합니다."
/>