React :: 회원가입 Form 만들기 (커스텀훅)

노드버드 강의를 정리하며 공부하는 글

 

커스텀훅 (useInput)

회원가입 페이지는 input을 매우매우매우 많이 만들어야 한다.

이렇게 반복되는 것이 많을 때는

커스텀훅을 사용해 중복을 줄여줄 수 있다.

 

 

hooks 디렉토리를 만들고, useInput.js 파일을 만들어준다.

반복적으로 사용되는 패턴이었던 useState와 setValue를 react hook으로 묶어줬다.

return은 value와 setValue를 지정하는 함수를 담은 배열로.

 

배열에 넣어 이런식으로 사용할 수 있다. 😃😃😃

 

 

---

비밀번호 체크 항목 만들기

 

비밀번호를 한번 더 입력해서 체크해주는 항목을 만들어보자.

이 항목은 password와 일치하지 않다면 오류를 띄워줄 문장이 추가되기 때문에

아쉽게도 useInput을 사용할 수는 없다.

 

passwordError란 state를 만든다.

이 함수 안에서의 e.target.value는 비밀번호 체크창에 적는 value.

즉 passwordCheck값과 동일하다.

 

passwordError는 passwordCheck값과 password 값이 일치하지않으면 true를,

일치한다면 false를 반환한다.

 

ture일경우(일치하지않을경우) 아래와같은 에러메시지를 띄운다.

<ErrorMessage>는 styled-components를 사용하기 위해 만들어놓은 이름^^;;

 

 

동일한 로직으로 약관동의항목도 만들 수 있다.