리엑트에서 많이 사용하는 모듈 play ground
yarn set version berry
yarn dev
const {
register,
handleSubmit,
formState: {
isValid, // values 가 유효할 경우 true
errors,
},
} = useForm<Autho>({
defaultValues: {
uid: "",
},
});
const onSubmit = (data: Autho) => {
console.log(data);
};
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input register={register("uid")} />
</form>
);
const FormInput = forwardRef<HTMLInputElement, IProps>((props, ref) => {
const { register, type } = props;
return (
<InputStyle ref={ref} {...{ ...register, type: type ? type : "text" }} />
);
});
FormInput.displayName = "FormInput"; // lint 에러 방지
// _app.tsx
import { RecoilRoot } from "recoil";
export default function App({ Component, pageProps }: AppProps) {
return <RecoilRoot>...</RecoilRoot>;
}
// store/autho.ts
import { atom } from "recoil";
export const authoState = atom({
key: "autho",
default: {
uid: "",
name: "",
},
});
import { useRecoilValue } from "recoil";
const value = useRecoilValue(authoState);
import { useSetRecoilState } from "recoil";
const setValue = useSetRecoilState(authoState);
import { useRecoilState } from "recoil";
const [state, setState] = useRecoilState(todoListState);