React hook을 이용해 회원가입 화면을 구현해보자.
useState
를 통해 state를 변경한다.const [id, setId] = useState('')
const onChangeId = (e) => {
setId(e.target.value)
}
<input value={id} onChange={onChangeId} />
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>}
// 기존
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('')
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의 첫번째 파라미터는 함수를 담고, 두번째 파라미터는 배열을 넣는데 어떤 값이 바뀌었을 때 함수를 새로 생성해야 하는지
를 명시하는 것이다.
만약 비어있는 배열을 넣게 되면 컴포넌트가 렌더링 될 때 단 한번만 함수가 생성되며, 배열 안에 값이 있다면 해당 값이 바뀔때 함수가 생성된다.