# useForm
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 기반의 인기있는 유효성 검사 라이브러리이다.사용해보고 직접 느낀 생각을 간단하게 정리해보겠다.렌더