[리액트]nodebird 섹션1. - 회원가입 페이지만들기(커스텀 훅)

중복되는 요소들이 많을때 커스텀 훅을 만들어준다

훅을 쓸 수 있는 조건

반복문, 함수, 조건문 안에서는 쓸 수 없다.

커스텀 훅 만들기

hooks폴더 생성, useInput.js를 만들어준다.

이렇게 계속 중복되는 부분을 넣는다. useInput 에 넣어준다.

const [id, setId] = useState('');
const onChangeId = useCallback((e)=>{
  setId(e.target.value)
},[]);

const [nickname, setNickname] = useState('');
const onChangeNickname = useCallback((e)=>{
  setNickname(e.target.value)
},[]);

useInput.js

import { useState, useCallback } from 'react';

export default (initialValue) => {
  const [value, setValue] = useState(initialValue); //initialValue 초기값
  const handler = useCallback((e)=>{
    setValue(e.target.value);
  },[]);

  return [value, handler];
}

회원가입 페이지 만들기

Signup.js

const Signup = () => {
  const [id, onChangeId] = useInput('');
  const [nickname, onChangeNickname] = useInput('');
  const [password, onChangePassword] = useInput('');

  
  return(
    <Form onFinish={onSubmit}>
    <div>
        <label htmlFor="user-id">아이디</label>
          <br/>
          <Input name="user-id" value={id} required onChange={onChangeId}/>
        </div>
        <div>
          <label htmlFor="user-nick">닉네임</label>
          <br/>
          <Input name="user-nick" value={nickname} required onChange={onChangeNickname}/>
        </div>
        <div>
          <label htmlFor="user-password">비밀번호</label>
          <br/>
          <Input type="password" name="user-password" value={password} required onChange={onChangePassword}/>
        </div>
    </Form>
  )
}

비밀번호 체크 (error메세지 만들기)

useInput를 쓰려고했지만, 조금 다름으로 따로 써준다.

const ErrorMessage = styled.div`
  color:red;
`

const Signup = () => {
  const [passwordCheck, setPasswordCheck] = useState('');
  const [passwordError, setPasswordError] = useState(false);

  const onChangePasswordCheck = useCallback((e)=>{
    setPasswordCheck(e.target.value);
    setPasswordError(e.target.value !== password);
  },[password]);

  return(
    <div>
      <label htmlFor="user-password-check">비밀번호 체크</label>
      <br/>
      <Input 
        type="password" 
        name="user-password-check" 
        value={passwordCheck} 
        required 
        onChange={onChangePasswordCheck}            
      />
      { passwordError && <ErrorMessage>비밀번호가 일치하지 않습니다.</ErrorMessage> }
     </div>
  )
}

약관동의 만들기(error메세지 만들기)

const Signup = () => {
    const [term,  setTerm] = useState('');
    const [termError, setTermError] = useState(false);
    const onChangeTerm = useCallback((e)=>{
      setTerm(e.target.checked);
      setTermError(false);
    },[term])

    const onSubmit = useCallback(()=>{
      if(password !== passwordCheck){
        return setPasswordError(true);
      }

      if(!term){
        return setTermError(true)
      }
      console.log(id, nickname, password);
    },[password, passwordCheck, term]);
  
    return(
      <div>
        <Checkbox name="user-term" checked={term} onChange={onChangeTerm}> 제로초 말을 잘 들을 것을 동의합니다.</Checkbox>
 		 { termError && <ErrorMessage>약관에 동의하셔야 합니다.</ErrorMessage> }
 	   </div>
       <div styled={{ marginTop: 10 }}>
         <Button type="primary" htmlType="submit">가입하기</Button>
      </div>
    )
}