오늘 한 일

알고리즘 코드카타
팀 프로젝트 진행
└ MUI 모달 적용
└ React-hook-form 으로 로그인 / 회원가입

오늘 공부한 내용

✅ 왜 React-hook-form 이지?

회원가입 기능을 구현할 때 유저로부터 닉네임, 이메일 주소, 비밀번호 등 여러가지 데이터를 입력받아 state로 관리하는데, 입력받을 항목이 늘어남에 따라 관리해야 하는 state도 많아지고 그에 따른 렌더링도 많아지기 때문에 이를 개선해주는 React 라이브러리인 React-hook-form을 이용해서 로그인 / 회원가입을 구현하기로 했다

장점

• input에 변화가 있을 때 form 전체가 리렌더링 되지 않고 입력받는 input만 리렌더링 됨
• 빠른 component mounting 속도

'use client';
import * as React from 'react';
import Button from '@mui/material/Button';
import { useForm, SubmitHandler } from 'react-hook-form';
import { values } from 'lodash';

interface RegisterInput {
    email: string;
    password: string;
    passwordCheck: string;
    nickname: string;
}

const Register = () => {
    const {
        register, // onchage, onblur, onclick등 가진 객체 생성
      	//form onsubimt에 들어가는 함수.
      	//데이터가 유효할 때와 유효하지 않을 때 실행함수를 각각 받는다
        handleSubmit, 
        setError, //errors에 별도의 에러메시지를 추가할 수 있게 해준다
        formState: { errors }, //register들의 에러메시지를 자동출력해준다
    } = useForm<RegisterInput>({ mode: 'onBlur' });

    //데이터가 유효할 때 실행되는 함수
    const onValid = (data: RegisterInput) => {
        if (data.password !== data.passwordCheck) {
            setError(
                'passwordCheck', // 에러 핸들링할 input요소 name
                { message: '비밀번호가 일치하지 않습니다.' }, // 에러 메세지
                { shouldFocus: true }, // 에러가 발생한 input으로 focus 이동
            );
            return;
        }
        console.log(data);
    };

    return (
        <form className='flex flex-col' onSubmit={handleSubmit(onValid)}>
            <input
                type='text'
                placeholder='이메일'
                className='p-2 mb-1'
                {...register('email', {
                    required: '이메일을 입력해주세요',
                    pattern: {
                        value: /^[a-zA-Z0-9+-\_.]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/,
                        message: '이메일 양식에 맞춰 입력해주세요',
                    },
                })}
            />
            <span className='text-red-600'>{errors?.email?.message}</span>
            <input
                type='password'
                placeholder='비밀번호(6~14자 사이 글자+숫자)'
                className='p-2 mb-1'
                {...register('password', {
                    required: '비밀번호를 입력해주세요',
                    pattern: {
                        value: /^(?=.*[a-zA-Z])(?=.*[0-9]).{6,14}$/,
                        message: '비밀번호 양식에 맞춰 입력해주세요',
                    },
                })}
            />
            <span className='text-red-600'>{errors?.password?.message}</span>
            <input
                type='password'
                placeholder='비밀번호 확인'
                className='p-2 mb-1'
                {...register('passwordCheck', {
                    required: '비밀번호가 일치하지 않습니다',
                    pattern: {
                        value: /^(?=.*[a-zA-Z])(?=.*[0-9]).{6,14}$/,
                        message: '비밀번호가 일치하지 않습니다',
                    },
                })}
            />
            <span className='text-red-600'>
                {errors?.passwordCheck?.message}
            </span>
            <input
                type='nickname'
                placeholder='닉네임(2~10글자)'
                className='p-2 mb-2'
                {...register('nickname', {
                    required: '닉네임을 입력해주세요',
                    pattern: {
                        value: /^([a-zA-Z0-9ㄱ-ㅎ|ㅏ-ㅣ|가-힣]).{2,10}$/,
                        message: '닉네임 양식에 맞춰 입력해주세요',
                    },
                })}
            />
            <span className='text-red-600'>{errors?.nickname?.message}</span>
            <Button type='submit' variant='outlined'>
                회원가입
            </Button>
        </form>
    );
};

export default Register;

느낀 점

nextjs app-router 도 mui 도 react-hook-form 도
다 처음 접하는 것이라 처음에 어떻게 손을 대야할지 한참을 헤맸다
(간단한 router 설정을 못해서 물어보고 했으니 말 다했지^^)
처음 설정하는 법이 제일 어려운 것 같다
일반 react로 해도 헷갈리는데 typescript 까지 쓰려니 더 어려운 것 같다
아직 suparbase로 인증이 남아있는데..
무사히 끝낼 수 있을지 매우 걱정된다 ㅎㅎ

참고
https://velog.io/@0506phm/react-hook-form%EC%9C%BC%EB%A1%9C-%EC%97%90%EB%9F%AC-%EA%B4%80%EB%A6%AC%ED%95%98%EA%B8%B0
https://velog.io/@0506phm/react-hook-form%EC%9C%BC%EB%A1%9C-%EC%97%90%EB%9F%AC-%EA%B4%80%EB%A6%AC%ED%95%98%EA%B8%B0