# useForm

16개의 포스트
post-thumbnail

react-hook-form 유효성 검사하기

required : 필수 여부pattern : 유효성 검사 정규식minmaxminLengthmaxLengthvalidate : 직접 작성한 유효성 검사 함수{errors?.input명.type === 유효성 검사 항목 && 에러 메시지 요소} 형태로 사용Enter 적용

2023년 4월 19일
·
0개의 댓글
·
post-thumbnail

조각조각 - react-hook-form

지금까지 개인 프로젝트를 진행할때 입력 폼을 ₩\~~ 방식으로해왔습니다. 팀프로젝트로 useForm을 맛보기만 해보았는데 되게 유용하다고 느꼈습니다. 다음 프로젝트에는 useForm을 제대로 활용할것이기 때문에 제대로 공부해보도록 하겠습니다. react-hook-for

2023년 3월 16일
·
0개의 댓글
·
post-thumbnail

[WIL] 내배캠4기 React 15주차

여태껏 투두리스트, 프로젝트를 거쳐오면서 여러개의 인풋과 그걸 관리하는 state를 만들었었다.제출하는 인풋창이 많을 수록 setState도 많아졌는데, 리액트 훅 중에 Form을 사용하면 한번에 db에 저장시킬 수 있다.

2023년 2월 13일
·
0개의 댓글
·
post-thumbnail

useForm을 사용해 file첨부, json파일도 같이 보내기.(formdata)

해결해야 하는 문제:react useForm을 사용해 multipart formdata를 보내야 한다.multipart formdata안에는파일 2개, json파일이 있는데json파일은 application/json으로 보내야 한다.파일 1개는 단일 이미지 파일 1개고

2022년 12월 5일
·
0개의 댓글
·

main-프로젝트/ 회원가입 유효성 검사

아직 서버 연결이 되지 않아서 기다리는 겸 유효성 검사 부분 코딩을 먼저 진행했다. typescript로 진행하는 것은 처음이어서 검색을 하던 중, yup 이라는 좋은 라이브러리를 발견했다react-hook-formyup@hookform/resolvers다음 명령어를

2022년 9월 17일
·
0개의 댓글
·
post-thumbnail

useForm formState 사용 시 isValid 미작동 이슈

위 처럼 라디오 버튼이 모드 체크되어 있을 때만 퀴즈풀기 버튼을 활성화 하기 위해useForm formState를 사용하여 button에 disabled={!isValid} 속성을 넣어봤지만 작동하지 않았다.useForm 깃허브 이슈 탭에서 isValid는 렌더링 된

2022년 8월 28일
·
0개의 댓글
·
post-thumbnail

7/14 19일차

오늘은 마이페이지의 비밀번호 변경 시 뜨는 모달 창의 벨리데이션을 적용할 때 리액트 훅 폼을 공부해서 사용해봤다.: input에서 값을 불러오기 위한 함수: 다른 옵션을 이용하면 input의 유효성 검사도 쉽게 할 수 있다.: register를 input에 넣어서 re

2022년 7월 15일
·
0개의 댓글
·

UploadForm.js

들어가기select Photo, take Photo한 사진을 props로 받아서caption과 함꼐 uploadPhoto Mutation을 실행하여,사진을 DB에 저장하고, 뿌리는 screen역시, file(picture, video)등을 다루는 부분은 어려우니 집중할

2022년 6월 10일
·
0개의 댓글
·

search.js

들어가기insta에서 사진의 caption에 있는 단어들을 근거로,검색을 해서 사진을 찾아서 뿌려줄 수 있다.사진을 클릭 하면, 사진을 feed에 나오는 사진처럼 like, comment, 등등을 볼 수 있다.화면 바깥을 클릭했을때, 키보드가 사라지는 component

2022년 5월 31일
·
0개의 댓글
·

CreateComment(1)

들어가기사진에 댓글다는 기능을 구현createComment(1)에서는 useForm과 useMutaion을 이용해서 댓글 다는것을구현하고 createComment(2)에서는 realTime, cache를 다루는 방법을 알아보자.Photo Component에서 Comme

2022년 5월 9일
·
0개의 댓글
·

isSubmitting

2022년 5월 6일
·
0개의 댓글
·

[TIL] Next.js + useForm(react Hook) 으로 폼 유효성 검사

로그인이나 회원가입 기능을 만드는 경우에 유효성 검사는 굉!장!히 중요한 부분이다. 플링 웹 어드민 페이지 마이그레이션 중, 로그인 페이지 유효성 검사 부분에서 블로커에 직면했고 그 이유는 Next.js에서 사용하지 못하는location 때문이었다. 이를 해결하기 위해

2021년 11월 15일
·
0개의 댓글
·
post-thumbnail

react-hook-form으로 form 최적화하기

react-hook-form을 통해 form을 최적화하는 과정에서 느낀 주관적인 사용 경험

2021년 11월 14일
·
1개의 댓글
·

React hook Form

react hook으로 form을 쉽게 만들 수 있도록 도와줌설치npm i react-hook-form기본 예제input태그에 name을 설정해 주어야 useForm이 찾을 수 있음handleSubmit(): form이 valid할 때 form 데이터를 넘겨줌watch

2021년 3월 31일
·
0개의 댓글
·
post-thumbnail

react-hook-form이란?

공식 홈페이지에 접속하면 첫번째로 강조하는 것이 '유연하고 확장 가능한 사용하기 쉬운 고성능 폼 검증 라이브러리'라고 정의되어 있다.react-hook-form은 hook 기반의 인기있는 유효성 검사 라이브러리이다.사용해보고 직접 느낀 생각을 간단하게 정리해보겠다.렌더

2020년 10월 18일
·
0개의 댓글
·