약관동의부분

안녕하세요. 강의 너무 잘듣고있습니다 ^^

두가지 질문있는데요,

1) onChangeTerm의 deps에 term이 들어가는 이유, 들어가지 않을때와 언제 들어가야하는지 헷갈립니다. ㅜ

2) 저는 아래와같이 termError에 not 조건을 주어야 Errormessage가 노출되지 않던데,, 아래 작성한 코드 첨부드렸습니다. 혹시 잘못된 부분이 있는지 확인 부탁드립니다.

{!termError && <ErrorMessage> Agreement cannot be null. </ErrorMessage>}

import React, {useCallback, useState} from 'react';
import AppLayout from "../components/AppLayout";
import Head from "next/head";
import {Button, Checkbox, Form, Input} from "antd";
import useInput from "../hooks/useInput";
import styled from 'styled-components';

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]);

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


    const onSubmit = useCallback(() =>{

        console.log(term);

        if(password !== passwordCheck){
            return setPasswordError(true);
        }
        if (!term){
            return setTermError(true);
        }
        console.log(id, password, nickname);
    }, []);


    return (

        <AppLayout>
            <Head>
                <title>Sign up | NodeBird</title>
            </Head>

            <Form onFinish={onSubmit}>
                <div>
                    <label htmlFor="user-id">ID</label>
                    <br/>
                    <Input name="user-id" value={id} required onChange={onChangeId} />
                </div>
                <div>
                    <label htmlFor="user-nick">NICKNAME</label>
                    <br/>
                    <Input name="user-nick" value={nickname} required onChange={onChangeNickname} />
                </div>
                <div>
                    <label htmlFor="user-password">PASSWORD</label>
                    <br/>
                    <Input name="user-password" value={password} required onChange={onChangePassword} />
                </div>

                <div>
                    <label htmlFor="user-password-check">PASSWORD CHECK</label>
                    <br/>
                    <Input
                        name="user-password-check"
                        type="password"
                        value={passwordCheck}
                        required
                        onChange={onChangePasswordCheck}
                    />
                    {passwordError && <ErrorMessage> Password is not equal. </ErrorMessage>}
                </div>

                <div>
                    <Checkbox name="user-term" checked={term} onChange={onChangeTerm}>
                        제로초 말을 잘 들을 것에 동의합니다.
                    </Checkbox>
                    {!termError && <ErrorMessage> Agreement cannot be null. </ErrorMessage>}
                </div>

                <div style = {{ marginTop: 10}}>
                    <Button type="primary" htmlType="submit">Sign up</Button>
                </div>
            </Form>
        </AppLayout>

    );
};



export default Signup
;

Inflearn Community Q&A