# react hook form

31개의 포스트
post-thumbnail

라이브러리를 처음 쓰세요? 그럼 코드샌드박스부터 들르세요

아 처음보는 라이브러리 사용해서 공부도해야하고 적용도 해야되는데.. 어떡하냐.. => 코샌박아 이거 적용하기 전에 따로 콘솔 찍어가면서 좀 봐봐야 할 것 같은데 => 코샌박아 이거 좀 무서운데... => 코샌박처음 라이브러리를 배우는 상황이거나 공식문서를 보고 따라해봐

약 4시간 전
·
0개의 댓글
post-thumbnail

1.12- React masterClass (trello cloning 3)

reference는 JS 코드를 이용해 HTML요소를 지정하고 가져올 수 있는 방법이다. 바닐라JS에서 document.getElementById를 해서 HTML요소를 가져오는 것 처럼 useRef를 이용해서 요소를 가져올 수 있다. 예를들어 이렇게 사용하면 but

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

React Hook Form - React Form 라이브러리

react hook form 써보기

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

프로젝트 (회원가입UI, 유효성검사)

이번에는 회원가입 유효성 검사를 진행해보았다. 로그인에서 사용해줬던 yup,react-hook-form,@hookform/resolvers/yup 을 사용했다. 로그인과 다른점은 회원가입시 입력받아야할 값이 이름과 비밀번호 확인체크가 추가되어서 두가지를 추가시켜주었다.

2021년 12월 29일
·
0개의 댓글
post-thumbnail

웹에디터 사용하기 /react-hook-form

yarn add react-quill 설치웹에디터가 잘 나온다........!

2021년 12월 7일
·
0개의 댓글
post-thumbnail

[react] react-hook-form에서 debounce 사용하기

평소처럼 애용하는 react-hook-form을 사용해서 자동완성을 구현하려하는데, 생각해보니 그냥 onChange를 활용하면 너무 통신이 잦아질 것 같다는 생각이 들었다. 그래서 어떻게 방법이 없나 찾아보았는데.stack-overflow에서 onChange안에 다가

2021년 11월 29일
·
0개의 댓글

[React] 클린 코딩을 하자!

오늘 작업은 비밀번호 reset form이었다.그동안 너무 막 그때그때 필요한 컴포넌트를 만들면서 했는데, 이번 기회에 재사용 가능하게 만들어보고 싶어서 그리했고, 마음에 드는 결과물이 나온 것 같아서 자랑(?)해본다.

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

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

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

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

[21.10.28. 목] form validation

form validation, input format 설정을 더 편하고 깔끔하게 하기

2021년 10월 28일
·
0개의 댓글

ReactHookForm Submit 테스트 이슈

Testing 공부를 위해 간단한 todo-list 앱을 만들어 테스트중에있다.form의 경우 react-form-hook을 사용하는데, submit 이벤트를 호출해도 jest에서 제대로 감지못하는 이슈가있었다. 거의 3시간을 소요한 것 같다... ㅠㅠ원인은 간단했다.

2021년 10월 17일
·
0개의 댓글

[TIL] 10월 7일 ReactHookForm(yup)

게시글 입력, 로그인, 회원가입 등의 과정을 구현하면서 공통적으로 사용되었던 내용들중 하나가 바로 검증이다. 이메일 입력부분에 입력이 되었는지, '@'가 필요한지, 최소 자리수를 만족하는지 등등 이러한 조건들을 사용하려면 if문으로 제어를 해줘야 했고, 정규표현식을

2021년 10월 11일
·
0개의 댓글

React에서의 Form 관리와 validation: React-hook-form

React-Toastify toastify example error 발생 시 다음과 toastify 라이브러리에서 제공하는 UI를 사용하여 깔끔하게 UI를 표시할 수 있다. 최근에 많이 선호되는 UI 방식이다. https://github.com/fkhadra/re

2021년 9월 12일
·
1개의 댓글
post-thumbnail

React Hook Form 예제

예제를 이용한 React Hook Form 기능 살펴보기 이미 존재하는 폼에 적용하기

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

React Hook Form 베이직

React Hook Form에서 유효성 검사 속성 및 에러 메세지 추가하기React Hook Form에서 검사 방식은 아래와 같습니다위의 유효성 검사를 통과하지 못할 때 useForm의 errors 객체를 이용하여 에러 메세지를 보여줄 수 있음간단한 샘플을 아래와

2021년 8월 30일
·
0개의 댓글
post-thumbnail

[React Hook Form] useRef 연결하여 사용하기

React-use-Form을 사용하다 보면, useRef를 연결하여 사용할 일(스크롤 관련이나, 포커싱 관련 이벤트를 처리할 때)이 종종 있다.예를 들어, textarea의 인풋 창을 수정할 때 value의 높이에 따라 textarea의 크기를 조절할 때가 있다.

2021년 8월 16일
·
0개의 댓글
post-thumbnail

react-hook-form, yup

yup react-hook-form에서 사용 재사용 가능한 react-hook-form component form

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

React| React-Hook-Form & Webkit 자동완성 문제

FE 개발자로써 유효성 검사를 하다보면 되게 수고가 많아지는 경험을 하곤한다. 나도 첫 개인프로젝트를 진행할 때 commons 폴더에 function 하나를 빼놓고 해당 폴더안에서 이메일, 패스워드, 이름, 등 유효성 검사를 early exit 형태로 진행하도록 구현하

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

React-Hook-Form

모듈actions / index. jsreducers / todos.js, index.js , ...counter 모듈액션타입 - 모듈이름/액션명액션 생성함수초기상태 선언리듀서 선언todos 모듈액션타입액션생성함수초기상태선언리듀서 선언모듈 합치기modules/ inde

2021년 6월 2일
·
0개의 댓글