[트위터클론] 3.회원가입 화면 구현

React hook을 이용해 회원가입 화면을 구현해보자.

1. 기본적인 Input 핸들링. useState를 통해 state를 변경한다.

const [id, setId] = useState('')

const onChangeId = (e) => {
  setId(e.target.value)
}

<input value={id} onChange={onChangeId} />
  

2. 비밀번호 불일치시 오류 메세지 띄우기

const [password, setPassword] = useState('')
const [passwordChk, setPasswordChk] = useState('')
const [passwordError, setPasswordError] = useState(false)

const onChangePassword = e => setPassword(e.target.value)
const onChangePasswordChk = e => {
  if (e.target.value !== password) return setPasswordError(true)
  setPasswordChk(e.target.value)
}

<input type="password" value={password} onChange={onChangePassword}  />
<input type="password" value={passwordChk} onChange={onChangePasswordChk}  />
{passwordError && <div>비밀번호가 일치하지 않습니다.</div>}

3. Custom hook으로 input 데이터 관리 편리성 높히기

// 기존
const [id, setId] = useState('')
const onChangeId = e => {
  setId(e.target.value)
}

// 변경
cosnt useInput = (initValue = null) => {
  const [value, setter] = useState(initValue)
  const handler = useCallback(e => {
    setter(e.target.value)
  }, [])
  return [value, handler]
}
const [id, onChangeId] = useInput('')

4. useCallback으로 렌더링 최적화
   useCallback은 렌더링 최적화하는 상황에서 쓰이는데, 이벤트 핸들러 함수를 필요할 때만 생성 할 수 있다.
   예를들어 onChangePasswordChk와 같이 선언이 되면, 컴포넌트가 리렌더링 될 때마다 함수들이 새로 생성된다.

// 기존
const onChangePasswordChk = e => {
  setPasswordError(e.target.value !== password)
  setPasswordCheck(e.target.value)
}

// useCallback 적용
const onChangePasswordChk = useCallback(e => {
  setPasswordError(e.target.value !== password)
  setPasswordCheck(e.target.value)
}, [password])

useCallback의 첫번째 파라미터는 함수를 담고, 두번째 파라미터는 배열을 넣는데 어떤 값이 바뀌었을 때 함수를 새로 생성해야 하는지 를 명시하는 것이다.

만약 비어있는 배열을 넣게 되면 컴포넌트가 렌더링 될 때 단 한번만 함수가 생성되며, 배열 안에 값이 있다면 해당 값이 바뀔때 함수가 생성된다.