[TIL]React/Typescript Recoil/Form

오늘 공부한것 & 기억할 내용

Recoil (Global State)

• 어디에서든 접근 가능한 state
• 여러단계의 props를 거치지 않고 바로 value를 얻을 수 있다.

//atom.ts
import { atom } from "recoil";

export const isDarkAtom = atom({
    key:"isDark",//고유 key
    default:false //value
})

//App.tsx
//useRecoilValue는 value를 가져온다
 const isDark = useRecoilValue(isDarkAtom);
return(
 	<ThemeProvider theme={isDark ? darkTheme : lightTheme}>
      <GlobalStyled/>
      <Outlet />
      <ReactQueryDevtools initialIsOpen={true}/>
	</ThemeProvider>
)

//useRecoilState은 value를 업데이트(수정) 가능하다
//useRecoilState은 배열형태 [원본값, 수정할Function(setFn)이름]
const [isDark, setterFn] = useRecoilState(isDarkAtom); 
const toggleDarkMode = () =>setterFn((pre) => !pre)

selector

• selector는 Recoil 상태의 변화를 감지하고 원본값은 변하지 않고 변형을 할 수 있는 값이다.

export const toDoState = atom<IToDo[]>({
    key:"todo",
    default:[]
})

//atom의 toDoState를 가져와서 원하는 값들만 분류하여 return한다.
export const toDoSelector = selector({
    key:"todoSelector",
    get:({get}) => {
        const toDos = get(toDoState)
        return [
            toDos.filter(i => i.category === "DOING"),
            toDos.filter(i => i.category === "DONE"),
            toDos.filter(i => i.category === "TO_DO")
        ]
    }
})

Form

• input등 form 으로 관리한 작업들을 useState, onChange이벤트 등을 사용하지 않고 간편하게 도와주는 Hook

//register는 value값 등 을 보여준다.
//onChange처럼 실시간으로 들어오는 인자 확인하고 싶다면 watch추가하여 확인console.log(watch())
//handleSubmit는 두개의 인자를 받는다. (유효할때 실행될 함수, 유효하지 않을때 실행될 함수)
//useForm(defaultValuse:{todo:"@naver"})기본값 설정 가능
const {register, handleSubmit, formState:{errors}} = useForm();


{/* 
- HTML안의 required를 사용하면 개발자도구에서 삭제할 수 있기에 스크립트로 넣어준다 
- pattern을 사용해 정규식 검사를 할 수 있다.
*/}
<input type="text" {...register("todo",{
  required:"Please put text",
  pattern:{
    value:/^[A-Za-z0-9._%+-]+@naver\.com$/,
    message:'only naver.com emails'
  },
  //validate : { (value) => !value.includes("nico") || "error message"}
  validate:(value) => value.includes("kim") ? "No kim allowed" : true
})}/>
{/* formState의 errors를 사용해서 에러 메세지 노출 */}
<span>{errors?.todo?.message}</span>
<input type="text" {...register("name",{required:true,minLength:{
  value:5,
  message:"too short"
}})}/>

setError

• 직접 에러를 설정

const onValid = (data:FormData) => {
	if(data?password !== data?password1){
       setError("password1",
       {massage:"password are not the same"},
       {shouldFocus:true}
       )
	}
}

validate

• 특정 조건에 따라 입력값 검증, 조건이 충족되지 않았을 경우 에러값 노출

validate : { (value) => !value.includes("nico") || "error message"}

배운점 & 느낀점

recoil을 사용하면 복잡한 상태관리를 하지 않고 효율적이게 상태가 관리된다는것을 알게 되었고, Form을 사용하면서 복잡한 코드를 간결하게 작성할 수 있다는점을 알게되었다.
아직은 익숙하지 않지만 익숙해지도록 여러번 사용해봐야할거같다.