# useForm

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

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

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

useForm을 사용해 file첨부, json파일도 같이 보내기.(formdata)
해결해야 하는 문제:react useForm을 사용해 multipart formdata를 보내야 한다.multipart formdata안에는파일 2개, json파일이 있는데json파일은 application/json으로 보내야 한다.파일 1개는 단일 이미지 파일 1개고
main-프로젝트/ 회원가입 유효성 검사
아직 서버 연결이 되지 않아서 기다리는 겸 유효성 검사 부분 코딩을 먼저 진행했다. typescript로 진행하는 것은 처음이어서 검색을 하던 중, yup 이라는 좋은 라이브러리를 발견했다react-hook-formyup@hookform/resolvers다음 명령어를

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

7/14 19일차
오늘은 마이페이지의 비밀번호 변경 시 뜨는 모달 창의 벨리데이션을 적용할 때 리액트 훅 폼을 공부해서 사용해봤다.: input에서 값을 불러오기 위한 함수: 다른 옵션을 이용하면 input의 유효성 검사도 쉽게 할 수 있다.: register를 input에 넣어서 re
UploadForm.js
들어가기select Photo, take Photo한 사진을 props로 받아서caption과 함꼐 uploadPhoto Mutation을 실행하여,사진을 DB에 저장하고, 뿌리는 screen역시, file(picture, video)등을 다루는 부분은 어려우니 집중할
search.js
들어가기insta에서 사진의 caption에 있는 단어들을 근거로,검색을 해서 사진을 찾아서 뿌려줄 수 있다.사진을 클릭 하면, 사진을 feed에 나오는 사진처럼 like, comment, 등등을 볼 수 있다.화면 바깥을 클릭했을때, 키보드가 사라지는 component
CreateComment(1)
들어가기사진에 댓글다는 기능을 구현createComment(1)에서는 useForm과 useMutaion을 이용해서 댓글 다는것을구현하고 createComment(2)에서는 realTime, cache를 다루는 방법을 알아보자.Photo Component에서 Comme
[TIL] Next.js + useForm(react Hook) 으로 폼 유효성 검사
로그인이나 회원가입 기능을 만드는 경우에 유효성 검사는 굉!장!히 중요한 부분이다. 플링 웹 어드민 페이지 마이그레이션 중, 로그인 페이지 유효성 검사 부분에서 블로커에 직면했고 그 이유는 Next.js에서 사용하지 못하는location 때문이었다. 이를 해결하기 위해

react-hook-form으로 form 최적화하기
react-hook-form을 통해 form을 최적화하는 과정에서 느낀 주관적인 사용 경험
React hook Form
react hook으로 form을 쉽게 만들 수 있도록 도와줌설치npm i react-hook-form기본 예제input태그에 name을 설정해 주어야 useForm이 찾을 수 있음handleSubmit(): form이 valid할 때 form 데이터를 넘겨줌watch

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