해결됨
[리뉴얼] React로 NodeBird SNS 만들기
useInput 했을때, 배열의 첫번째 요소가 func으로 나와요
id와 nickname에 마우스를 올리면 useState를 이용한 password(string), passwordCheck(boolean)과 다르게, 함수라고 나오는데 이렇게 되어도 괜찮은건가요?? 그리고 이것과 관련된 오류인지는 모르겠는데, 약관동의 버튼을 누르고 아이디와 비밀번호를 수정해도 값이 변경되지않습니다. 강의랑 똑같이 작성한것같은데 어디가 잘못된건지 모르겠네요 ㅠㅠ.. 어떻게 해결해야 할까요?? ```signup.jsimport React, { useCallback, useState } from 'react';
import AppLayout from '../components/AppLayout';
import Head from 'next/head';
import styled from 'styled-components';
import { Button, Checkbox, Form, Input } from 'antd';
import useInput from '../components/hooks/useInput';
const ErrorMessage = styled.div`
color: red;
`;
const Signup = () => {
const [id, onChangeId] = useInput('');
const [nickname, onChangeNickname] = useInput('');
const [password, onChangePassword] = useInput('');
const [passwordCheck, setPasswordCheck] = useState('');
const [passwordError, setPasswordError] = useState(false);
const onChangePasswordCheck = useCallback(
(e) => {
setPasswordCheck(e.target.value);
setPasswordError(e.target.value !== password);
},
[password]
);
console.log(id);
const [term, setTerm] = useState(false);
const [termError, setTermError] = useState(false);
const onChangeTerm = useCallback((e) => {
setTerm(e.target.checked);
setTermError(false);
}, []);
const onSubmit = useCallback(() => {
if (password !== passwordCheck) {
return setPasswordError(true);
}
if (!term) {
return setTermError(true);
}
console.log(id, nickname, password);
}, [password, passwordCheck, term]);
return (
<>
<AppLayout>
<Head>
<title>회원가입 | NodeBird</title>
</Head>
<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
name="user-password"
value={password}
required
onChange={onChangePassword}
/>
</div>
<div>
<label htmlFor="user-password-check">비밀번호체크</label>
<br />
<Input
name="user-password-check"
value={passwordCheck}
required
onChange={onChangePasswordCheck}
/>
{passwordError && (
<ErrorMessage>비밀번호가 일치하지 않습니다</ErrorMessage>
)}
</div>
<div>
<Checkbox name="user-term" checked={term} onChange={onChangeTerm}>
약관에 동의합니다.
</Checkbox>
{termError && <ErrorMessage>약관에 동의하지 않습니다</ErrorMessage>}
</div>
<div style={{ marginTop: '10px' }}>
<Button type="primary" htmlType="submit">
가입하기
</Button>
</div>
</Form>
</AppLayout>
</>
);
};
export default Signup;import { useState, useCallback } from 'react';
export default (initialValue = null) => {
const [value, setValue] = useState(initialValue);
const handler = useCallback((e) => {
setValue(e.target.value);
}, []);
return [value, handler];
};
