Input Custom Hook 만들어보기

1. 파일과 폴더 만들기

🔥clean code를 합시다 🔥

 

hooks📁

ㄴuseInput.js 

 

custom hook을 만들 때 파일은 js 파일로 만들어주어야 한다.

 

 

2. useInput.js 코드 작성하기

import { useState } from "react";

export default function useInput() {
  const [inputValue, setInputValue] = useState("");

  const handInput = (e) => {
    setInputValue(e.target.value);
  };

  const InitialValue = () => {
    setInputValue("");
  };

  return [inputValue, handInput, InitialValue];
}

 

 

 

3. useInput hook 사용하기

  const [name, nameHandler, nameInitialValue] = useInput("");
  const [passsWord, passWordHandler, passsWordInitialValue] = useInput("");
  const [nickName, nickNameHandler, nickNameInitialValue] = useInput("");

  const handleLoginInfoSubit = (e) => {
    e.preventDefault();

    if (!name || !passsWord) {
      return;
    }

    onAddLogin({
      id: "",
      name,
      passsWord,
      nickName,
    });

    nameInitialValue();
    passsWordInitialValue();
    nickNameInitialValue();
  };

  return (
    <LoginBox>
      <LoginForm onChange={handleLoginInfoSubit}>
        <Title>로그인</Title>
        <InputBoxs>
          <Inputs
            type="text"
            value={name}
            onChange={nameHandler}
            placeholder="아이디를 입력해주세요"
            maxLength={10}
          />
          <Inputs
            type="password"
            value={passsWord}
            onChange={passWordHandler}
            placeholder="비밀번호를 입력해주세요."
            maxLength={15}
          />
        </InputBoxs>
        <ButtonBoxs>
          <LoginButton>로그인</LoginButton>
          <SignUpLink to="/signup">아직 회원이 아니신가요? </SignUpLink>
        </ButtonBoxs>
      </LoginForm>
    </LoginBox>
  );
}