react-hook-form을 재사용 가능하게 만들고 싶어서, 이리저리 레퍼런스를 찾아보았지만 내 입맛에 맞는 것은 없었다. 그래서 수많은 삽질 후, 결국 만들어냈다. react-hook-form.. 너무 힘들었다 증말 react-hook-form의 기본 사용법 기존, react-hook-form에 있는 docs를 참고해보면 아래와 같이 쓸수도 있을 것이다. 하지만, 사용자입력값을 받아와야하는 폼들은 사용해야될 곳이 굉장히 많다. 매번 사용할 때마다 아래와 같이 입력하는 것은 참 번거롭다. import { useForm } from "react-hook-form"; export default function App() { const { register, handleSubmit, formState: { e..
보통 검증할 때 material + formik 조합으로 많이 사용하는데, 기존 formik은 무언가 버튼을 눌러서 submit 요청을 보내야 그 밑에 helperText가 뜨는 구조였다. 하지만, 내가 원하는 건 onChange 시에 바로바로 검증을 하여 helperText가 뜨는 구조를 원했다. 그래서 아래처럼 노가다를 진행했다.💤 Input Component props type : input의 type label : input의 제목 value : input의 value maxValue : input이 가질 수 있는 최대 글자수 setValue : value가 바뀌면 부모컴포넌트에있는 state에 저장시키기 위한 함수 regexCheck 또는 check함수 둘 중에 하나만 있으면 됩니다. regex..
이번주 배스킨라빈스 클론코딩 중 만나게 된 인풋 체크박스 체크된 값을 받아서 배열로 나열한 뒤 서버에 요청해야한다. 이 중에서 없음을 넣을 이유가 없어서, 없음 칸은 빼고 진행한다. feature const _allergy_list = [ "계란", "대두", "돼지고기", "땅콩", "밀", "복숭아", "우유", ]; const onClickHandler = target => { //알러지 선택취소의 경우 if (allergy_list.includes(target)) { setAllergyList(allergy_list.filter(ele => ele !== target)); return; } //불변성 유지 return setAllergyList([...allergy_list, target]); }..
