#5 State Management

깃허브

https://github.com/OneMoreBottlee/To-Dogithub.com

useForm < input 대용 성능 미침

사용하기 쉬운 유효성 검사를 통해 성능이 뛰어나고 유연하며 확장 가능한 form

조건을 설정하고, 에러 발생시 메세지를 보내는 등 유용한 기능이 가득하다.

설치

npm install react-hook-form

🔶register: name, onBlur, onChange, onClick, ref를 return하는 함수 < input {...register("category") ... > register 함수가 반환하는 객체를 input의 props로 사용 가능 < input onSubmit={} onClick={} onBlur={} > 같은 느낌

🔶watch: form의 입력값 변화를 관찰하는 함수

handleSubmit > 이 함수는 form 유효성 검사가 성공하면 form 데이터를 받습니다.

required > 필수 요소 지정 submit 시 비어있으면 알림 (true, text 두 형식 사용 가능)

minLength > 최소 길이 지정 + 메시지 보내기 가능

formState

setError > 추가적인 에러 발생시 에러 띄우기

validate > 검사만들기

shouldFocus?: boolean > 오류 발생하는 요소에 focus

setValue

reset

selectors on recoil

Selector는 파생된 state(derived state)의 일부를 나타낸다.

즉, 기존 state를 가져와서, 기존 state를 이용해 새로운 state를 만들어서 반환할 수 있다. 기존 state를 이용만할 뿐 변형시키지 않는다. derived state는 다른 데이터에 의존하는 동적인 데이터를 만들 수 있기 때문에 강력한 개념이다.

enums

열거형은 TypeScript가 제공하는 기능 중 하나입니다.

enum은 열거형으로 이름이 있는 상수들의 집합을 정의할 수 있습니다.

열거형을 사용하면 의도를 문서화 하거나 구분되는 사례 집합을 더 쉽게 만들수 있습니다. TypeScript는 숫자와 문자열-기반 열거형을 제공합니다.

https://www.typescriptlang.org/ko/docs/handbook/enums.html

RECOIL 공부하기..!

recoil-persist