Custom Hook
- 정의
간단하게 중복되는 로직을 하나의 만능 함수 컴포넌트로 따로 만든것입니다.
- 사용 용도
회원가입 Form , 로그인 Form 등 비슷한 로직이 여러 컴포넌트에서 쓰일 경우 코드의 재사용성을 높이고 중복로직을 최소화하기 위해 커스텀 훅을 사용합니다.
Custom Hook으로 회원가입 Form 만들기
기초 셋팅
Form.jsx
Input 셋팅
useForm.jsx
- useForm이란 Custum Hook을 만들어 defaultValue를 인자값을 받았다. 후에 defaultValue에는
{userid:' ',password:' '}가 들어가게 할것 입니다.- useState를 통해 values라는 상태와 상태를 수정할 수 있게 setValues를 설정해줍니다.
- values에는 defaultValue (
{userid:' ',password:' '})가 담기게 됩니다.- onChange 함수를 만들어 e.target으로 입력한 Input의 name과 value를 가져와 setValues( )를 통해 값을 수정해줄 것 입니다.
수정할때 객체의 key값은 [name] 이런식으로 배열로 겉을 감싸줘야합니다.- Object.keys( defaultValue )로 defaultValue key값을 가져올것인데 return값은 배열로 해주게 됩니다.
후에 defaultValue ={userid:' ',password:' '}이런식으로 설정할것이니 return값은 [ userid,password ] 이런식으로 나올것입니다.
여기에 reduce( )를 사용하여 객체 형태로 변환시킬것인데 객체의 key값은 Object.keys( defaultValue )의 return된 배열의 값들로 userid와 password가 들어갈것입니다.
이 key값들의 value로 values[v]값을 넣어줄것인데, 이 값은 values에 userid값과 password값이 차례대로 들어가게됩니다.
그리고 각각 onChange함수를 넣어주면 해당 input에 onChange이벤트가 실행될때 onChange 메서드가 실행될것입니다.
Form.jsx
Form.jsx에서 useForm을 import한 후 useForm에
{ userid:' ' , password:' ' }를 넣어주어 return값을 values에 담아줍니다.
이제 이 values에 담긴 userid와 password를 input에 각각 넣어줍니다.
이렇게 하면 userid값이 onChange되면 userid의 value를 업데이트 해줄것이고 password값이 onChange되면 password의 value값이 업데이트 될 것입니다.
중간 확인
값을 입력할때마다 각 input에 해당하는 value값이 업데이트됩니다.
지금은 굳이 이렇게 작업해야 하나 싶지만 Input이 2개가 아니라 많다면 Custum Hook을 사용하여 코드의 재사용성을 높여 작업의 효율성을 높일 수 있습니다.
Submit 처리하기
useForm.jsx
submit을 default false값으로 상태를 만들어주고 onSubmit 이벤트가 실행되면 Submit을 true값으로 바꿔주기 위해 handleSubmit 함수를 만들어 return에 보내줍니다.
Form.jsx
submit과 handleSubmit을 useForm에서 받아와서 Form에 onSubmit이벤트를 걸어 handleSubmit 함수를 넣어주고 Input submit에 disabled 속성값에 submit을 넣어 false일 경우 클릭할 수 있고 true일경우 클릭을 막도록 설정해주었습니다.
중간 확인
submit이 false일 경우에는 가입버튼이 활성화되어있습니다.
가입 버튼을 클릭하여 Submit이 true가 되어 가입버튼이 비활성화 되었습니다.
Form 체크
validate.js
userid와 password를 인자값으로 받아 userid와 password가 입력되어있는지 확인해주었고, 빈값일경우 각 값들이 입력되지 않았다는 메세지를 각 key의 value로 넣어주었습니다.
userid는 이메일 형식으로 입력하게 하기위해 정규식을 사용하여 이메일 형식으로 작성하였는지 확인하고 적합하지 않으면 이메일이 유효하지 않다는 메세지를 errors에 넣어주었습니다.
password는 길이가 8보다 작을때만 조건을 걸어 8자 이상인지 확인하고 8자 미만일경우 패스워드가 짧다는 메세지를 errors에 넣어주었습니다.
userid와 password 모두 형식을 맞추어서 작성하였다면 errors값은 빈 객체로 return하게 됩니다.
Form.jsx
Form.jsx에서 validate를 import해오고 useForm에 인자값으로 넣어주고 1초뒤에 items에 담긴 값들이 1초뒤에 alert되는 request 함수를 만들어 마찬가지로 useForm에 인자값으로 넣어줍니다.
useForm.jsx
우선 errors 상태를 빈 객체로 만들어주었고 handleSubmit안에 setErrors를 통해 values에 있는 userid나 password가 validate의 조건에 적합하지 못하면 error msg가 return에 담겨있을것이고 적합하면 빈객체로 되어있을것 입니다.
useEffect를 사용하여 errors 값이 업데이트 되었을때만 실행하게 해주었습니다.
submit이 true이고 errors의 객체의 key의 길이가 0이라면 에러가 없는것이니 requset 함수를 사용하여 values( {userid:values[v] , userid:values[v]} )를 alert 해주었고 submit값을 false로 바꾸어 가입버튼을 다시 활성화 시켜주었습니다.
마지막으로 Form.jsx에서 error 메시지를 화면에 렌더하기위해 errors를 return하였습니다.
Form.jsx
useForm의 return값으로 errors를 받아 삼항연산자를 사용하여 errors에 userid의 value값이 있으면 userid Input 밑에 에러 메시지를 렌더해주었고 errors에 password의 value값이 있으면 password Input 밑에 에러 메시지를 렌더해주었습니다.
결과
아이디가 이메일 형식에 맞지 않고 비밀번호 또한 8자리 미만이라 에러메시지가 출력되었습니다.
아이다와 비밀번호를 형식에 맞게 입력하였을 경우 alert가 뜨면서 userid와 password를 보여줍니다.
