so woon!

학습일 : 2023. 04. 18 useRecoilState 사용하기 useRecoilValue, useSetRecoilState 이렇게 두개의 함수를 따로 쓰는 것 보다 새 배열을 만들고 useRecoilState 함수를 사용해보도록 하자. () 안에는 역시나 atom을 넣어주면 된다. 꼴이 useState랑 똑같다. value만 불러오고 싶을 때는 useRecoilValue를 사용, value를 바꾸고 싶으면 useSetRecoilState를 사용, value와 modifier 함수를 둘다 얻고 싶다면 useRecoilState를 사용하면 되는 것이다. 사용법은 이러하다. const value = useRecoilValue(toDoState); const modFn = useSetRecoilState..

학습일 : 2023. 04. 18 submit 이 정상적으로 되면 input 에 값을 비워주도록 할텐데 setValue를 사용해보자 useForm 작성해준 부분에 setValue도 추가시킨다음 onSubmit 함수에 setValue를 적어주면 정상적으로 submit이 된다면 string이 비워지게 될 것이다. import { useForm } from "react-hook-form"; interface IForm { toDo: string; } function ToDoList() { const { register, handleSubmit, setValue } = useForm(); const onSubmit = (data: IForm) => { console.log("add to do", data.toD..

학습일 : 2023. 04. 17 validate 옵션을 사용해보자 validate 옵션은 예를 들자면 우리 사이트에 "사울" 이라는 이름을 가진 사용자를 가입을 허용하지 않을 때 사용할 수 있다. 즉 내가 직접 만든 조건으로 검사할 수 있는 것이다. validate는 함수를 값으로 가질 건데, 이 함수는 인자로 "항목에 현재 쓰여지고 있는 값" 을 받을 것이다. 이런 방식으로 작성해주면 된다. 이름에 사울을 포함할 때 사용할 수 없다는 메시지가 출력되고, 이름에 사울이 없을 경우 true를 반환하도록 한다. value.includes("사울") ? "사울이라는 이름은 사용할 수 없습니다." : true, })} placeholder="firstname을 입력해주세요." /> 실행결과 validate 객..

학습일 : 2023. 04. 17 정의해 준 에러 이외의 또 다른 에러가 발생했을 경우를 위해 새로운 에러를 등록하는 법을 알아보겠다. 새로운 에러를 정의해주기 위해 인터페이스에 먼저 작성해주어야 하는데, 일단 간단하게 extraError라고 이름지어 보겠다. 필수는 아니므로 ?를 붙여주고, 밑에서 if문 있는 곳에서 이 에러를 써주면 된다. 그리고 리턴시 span태그로 새로 등록한 에러를 표시해보도록 한다. import { useForm } from "react-hook-form"; interface IForm { email: string; firstname: string; lastname: string; username: string; password: string; password_check: st..

학습일 : 2023. 04. 17 setError를 react-hook-form으로 부터 꺼내어 드디어 사용해보자 setError는 특정한 에러를 발생시키게 해준다. 먼저, formState에 setError를 적어주고 const { register, handleSubmit, formState: { errors }, setError, } = useForm({ defaultValues: { email: "@naver.com", }, }); onVaild 함수에서 if문으로 두개의 비밀번호가 서로 일치하지 않을 경우 setError함수를 불러와주겠다고 해주고 password_check 부분의 message로 "패스워드가 다릅니다." 가 출력되도록 조치한다. const onValid = (data: IForm..

학습일 : 2023. 04. 17 React Hook Form 을 이용하여 회원가입 폼에서 경고메시지를 출력해보자. 참고사항 1.input 태그 안 자바스크립트로 required 항목에 true를 적거나 메세지를 적을 수 있다. 2. minLength의 경우 가령 5라는 값을 적거나, 값과 메세지를 가지는 객체를 줄 수 있다. 3. 정규식(Regular Expression) 사용 (코드에다 작성해준 문자열이 어떤 종류인지, 어떻게 생겨야 하는지를 설정해 줄 수 있음) 정규식 검사 참고 사이트 https://regex101.com/ /^[A-Za-z0-9._%+-]+@naver\.com$/ 위 정규식은 앞자리는 대소문자 A부터 Z까지 숫자와 부호들을 전부 포함 뒷자리는 naver.com과 일치하는 문자를 ..

학습일 : 2023. 04. 17 Form Validation 을 알아보도록 하겠다. 두가지 경우를 살펴보자. 1. onSubmit 으로 handleSubmit 함수를 주었을 경우 2. 그냥 html 태그 안에 required를 주었을 경우 이 둘의 차이는 무엇일까? 둘다 required가 똑같이 적용되는 것인데 말이다. 2번 (html 태그안 required를 주는 경우)는 개발자도구를 켜서 강제로 required를 삭제하면 정상적으로 submit이 되고 form 데이터가 들어가게 되는 의도치 않은 현상이 발생한다. 기본적으로는 email을 작성하지 않으면 html로부터 email을 적으라는 등의 소리를 듣게는 되겠지만 문제는 사용자가 이걸 지원하지 않는 환경인 브라우저에 있거나, 모바일에서 본다던가 ..

학습일 : 2023. 04. 16 저번 글 2023.04.16 - [REACT/개념정리] - [REACT] React Hook Form 에 이어서 이번에는 onSubmit 부분을 대체해 볼텐데 이전에는 이런식으로 작성해주었었다. function ToDoList() { const onSubmit = (event: React.FormEvent) => { event.preventDefault(); if (toDo.length < 10) { return setToDoError("To do should be longer~~"); } console.log("submit"); }; } export default ToDoList; 이제 useForm으로는 handleSubmit이라는 함수를 쓰면 된다. handleSu..