useInput 했을때, 배열의 첫번째 요소가 func으로 나와요
id와 nickname에 마우스를 올리면
useState를 이용한 password(string), passwordCheck(boolean)과 다르게, 함수라고 나오는데 이렇게 되어도 괜찮은건가요??
그리고 이것과 관련된 오류인지는 모르겠는데, 약관동의 버튼을 누르고 아이디와 비밀번호를 수정해도 값이 변경되지않습니다. 강의랑 똑같이 작성한것같은데 어디가 잘못된건지 모르겠네요 ㅠㅠ
.. 어떻게 해결해야 할까요??
```signup.js
import 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];
};
답변 1
0
문제가 있는 상황이 맞습니다. onChangeId에 손을 올리면 뭐라고 뜨나요? useInput 코드 자체는 문제가 없는데 희한하네요.
0
onChangeId도 위의 id와 똑같이
(e:any) => void | null로 나와요...
혹시 useInput의 return값을 다른식으로도 작성할수 있나요?? 뭐가 문제인지 모르겠네요 ㅠ
0
혹시 useInput은 형태가 이렇게 나오는게 맞나요 ??
// id뿐만 아니라 password랑 각각의 onChange함수도 모두 ( (e) =>void ) | null 꼴로 나옵니다
0
아 말을 헷갈리게 한것 같은데, 약관동의를 누른상태에서 input값을 수정하면 => 화면에서는 값이 변경이 되는데 , 가입하기 눌렀을때 console창에 뜨는 값이 약관동의 버튼 누른 이후의 값으로 변하지 않았습니다
예를들어 abcd을 작성하고 약관동의를 누른뒤에 abcdefg로 변경해도 console창에 abcd로 나옵니다. 그리고 약관동의를 해제했다가 다시 약관동의를 누르고 가입하기를 누르면 abcdefg로 정상적으로 콘솔에 출력됩니다
넥스트 버젼 질문
0
78
2
로그인시 401 Unauthorized 오류가 뜹니다
0
89
1
무한 스크롤 중 스크롤 튐 현상
0
175
1
특정 페이지 접근을 막고 싶을 때
0
103
2
createGlobalStyle의 위치와 영향범위
0
96
2
인라인 스타일 리렌더링 관련
0
91
2
vsc 에서 npm init 설치시 오류
0
146
2
nextjs 15버전 사용 가능할까요?
0
158
1
화면 새로고침 문의
0
121
1
RTK에서 draft, state 차이가 있나요?
0
153
2
Next 14 사용해도 될까요?
0
452
1
next, node 버전 / 폴더 구조 질문 드립니다.
0
349
1
url 오류 질문있습니다
0
211
1
ssh xxxxx로 우분투에 들어가려니까 port 22: Connection timed out
0
373
1
sudo certbot --nginx 에러
0
1275
2
Minified React error 콘솔에러 (hydrate)
0
470
1
카카오 공유했을 때 이전에 작성했던 글이 나오는 버그
0
247
1
프론트서버 배포 후 EADDRINUSE에러 발생
0
327
1
npm run build 에러
0
518
1
front 서버 npm run build 중에 발생한 에러들
0
382
1
서버 실행하고 브라우저로 들어갔을때 404에러
0
338
2
css 서버사이드 랜더링이 적용되지 않아서 문의 드립니다.
0
288
1
팔로워 3명씩 불러오고 데이터 합쳐주는걸로 바꾸고 서버요청을 무한으로하고있습니다.
0
239
2
해시태그 검색에서 throttle에 관해 질문있습니다.
0
201
1