Hook 수업 복습 //작성중

커스텀 훅을 쓰는 이유? 

컴포넌트를 만들다보면 반복되는 로직이 자주 발생한다. 특히 회원가입과 같은 input을 관리하는 코드는 관리할때마다 꽤나 비슷한 코드가 반복된다. 

-함수형 프로그래밍

 

 

오늘의 구현 목표는 조건을 단 회원가입 이다.

 

- ID칸에 아무것도 입력하지 않으면 '이메일이 입력되지 않았습니다.' 를 화면에 출력한다.

- 마찬가지로 PWD칸에 아무것도 입력하지 않으면 '비밀번호가 입력되지 않았습니다'를 출력한다.

 

아이디에서는 이메일의 유효성을 검사한다.

패스워드에서는 8자 이상의 패스워드 조건을 만족하지 못하면 '8자 이상의 패스워드를 사용해야합니다' 라는 결과를 출력한다.

---

우선 

UseInput 

1.useInput 커스텀 훅 만들기 

const useInput = (defaultValue) => {
    const [value,setValue] = useState(defaultValue)
    const onChange = e => {
        setValue(e.target.value)
    }

    return {
        value,
        onChange,
    }
}

input 태그에 입력되는 값인 e.target.value에  실시간으로 반응하기 위해 만든다.

value 에는 변수가 onChange에는 함수. 

 

useInput은 기본적으로 input을 업데이트 한다

 

 

const validate = ({userid,password} ) =>{
     const errors = {}
    if(!userid){
        errors.userid = "이메일이 입력되지 않았습니다."
    } else if(!/^[a-zA-Z0-9.%+-]+@[a-zA-Z0-9]+\.[a-zA-Z]{2,4}$/.test(userid) ){
        //정규표현식
        errors.userid = " 입력된 이메일이 유효하지 않습니다."
            
    }
    if(!password) {
        errors.password = " 비밀번호가 입력됮디 않았습니다."
        //{userid:'이메일이 입력되지 않았습니다 ' , password : '비밀번호가 }
    } else if(password.length <8) {
        errors.password = " 8자 이상의 패스워드를 사용해야 합니다."
    }
    return errors
}

 

우선 아이디 유효성 검사 코드는 정규표현식을 이용한다.

 

---

    const changeUserid = e => {
        const value = e.target.value
        setUserid(value)
    }

    const changePassword = e => {
        const value = e.target.value
        setPassword(value)
    }

 

 

 useInput이라는 input을 관리해주는 훅을 작성해줌으로써 id와 비밀번호 관련된 위의 코드를 아래처럼 간소화 할수 있다.

  const id = useInput('')
    const pw = useInput('')

 

 

 

---