Form3 react-hook-form + yup = 회원가입/로그인(feat.쿠키) react-hook-form + yup = 회원가입/로그인(feat.쿠키)✨ 회원가입react-hook-form & yup으로 폼 제출하기👇🏻기본 틀 const { register, handleSubmit, formState: { errors, isValid }, trigger, } = useForm({ resolver: yupResolver(authSchema), mode: 'all', }); // confirmPassword를 제외하고 폼 제출 const onSubmit: SubmitHandler = ({ confirmPassword, ...data }) => { console.log('폼 제출', data ); }; return ( .. 2024. 8. 2. input 공통 컴포넌트로 만들기 (feat. react-hook-form + yup) 리액트 훅 폼+yup을 사용해 input 공통 컴포넌트 만들기✨초기작업타입에 따라 input 분기처리하기import { passwordOffIcon, passwordOnIcon } from '@/libs/utils/Icon';import Image from 'next/image';import React, { useState } from 'react';import { FieldError, UseFormRegisterReturn } from 'react-hook-form';type InputProps = { label: string; name: string; type?: 'text' | 'password'; placeholder: string; register: UseFormRegisterRetur.. 2024. 8. 1. 라이브러리 없이 state로 폼 만들기 라이브러리 없이 state로 폼 만들기주요 기능폼 POST 요청폼 입력값 유효성 + 오류 메시지 출력하기아이돌 검색등록 후 list 페이지로 이동✅api GET으로 있는 아이돌 목록 띄우기페이지사이즈를 크게해서 모든 데이터를 다 불러오기… // get: 리스트 보여주기 const getIdolsData = async () => { setLoading(true); const result = await getIdols({ pageSize: 10000 }); const idolsList = result.list; // 기존 아이돌 리스트 뒤에 연달아 나와야 함 setIdolsData(idolsList ); }; useEffect(() => { getIdolsData();.. 2024. 7. 31. 이전 1 다음
