220414

複数のクエリー方法

useQuery

コンポーネントが画面に描画されるとapiリクエストは破棄されます.要求に応じてデータを受信すると、画面が自動的に描画されます.自動要求と画像

useLazyQuery

関数を作成できます.関数を実行するとデータ要求が失われ、データを受信するとuseQueryと同じ動作になります.つまり、useQueryと同じですが、実行する場所を選択できます.要求された手動画像の自動生成

useApolloClient

ユーザQueryは、axiosのように必要に応じてapi要求を発行することができる.(ex.キーを押す)axiosのようにデータのみを受信し、画面を描かない.手動要求と画像
ログインユーザのパッチ情報を取得できるのは、recoilstateにaccesTokenが保存されている場合のみです.

form

<form onSubmit={} >
  	이메일: <input type="text" onChange={onChangeEmail} />
    비밀번호: <input type="password" onChange={onChangePassword} />
    <button onClick={onClickLogin}> 로그인 하기 </button>
</form>

button type

reset:初期化入力値

submit:入力値

をコミット

ボタン:バインドonClick

を実行
buttonタイプのデフォルト値はsubmitです.typeが指定されていない場合、onClickイベントのみがバインドされている場合、submitとonClickは同時に発生します.

form library

フォームの作成は複雑なので、通常はライブラリを使用してフォームを作成します.フォーム作成ライブラリは次のとおりです.

react-form

redux-form

react-hook-form

formik

はい、現在最も使用されているライブラリはreact-hook-formです.

せいぎょようそ

各作成(変更)はstateに保存され、stateとinputの間のデータは100%一致します.したがって,入力値に対する精度が高い.値を変更するたびにレンダリングが続行されるため、制御素子の速度が遅くなります.

ひせいぎょそし

stateに直接保存するのではなく、後でインポートします.変更の精度は100%保証されませんが、速度は速く、入力するたびにレンダリングされません.react-hook-formは非制御素子なので、再レンダリングは高速ではありません.
必ずしも非制御素子が良いとは限らない.重要データの場合、非制御というより制御素子

react-hook-form

AJAX(비동기 JavaScript 통신)で作成され、ページを変換する必要はなく、データを交換する必要があります.

import { useForm } from "react-hook-form";

export default function ReactHookFormPage() {
  const { register, handleSubmit } = useForm();

  const onClickSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onClickSubmit)}>
      작성자: <input type="text" {...register("myWriter")} />
      제목: <input type="text" {...register("myTitle")} />
      내용: <input type="text" {...register("myContents")} />
      <button>등록하기</button>
    </form>
  );
}

// ...register("") 에 state 넣기
// handleSubmit 이 state 값을 onclickSubmit 에 전달

{..register(Board Address.addressDetail)入力時にオブジェクトとして入力します.

yup

入力した値が条件を満たしていることを確認します.yupはreact-hook-formに属するライブラリからではないので、他のライブラリと単独で使用できます.yarn add @hookform/resolvers yup Hookform/解析器とyupのインストール

import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

// yup.object 에 규칙 만들기
const schema = yup.object({
  email: yup
    .string()
    .email("이메일 형식이 적합하지 않습니다.") // 정규표현식 조건이 내장되어 있음
    .required("이메일은 필수 입력 사항입니다."),
  password: yup
    .string()
    .min(4, "비밀번호는 최소 4자리 이상 입력해야 합니다.")
    .max(15, "비밀번호는 최대 15자리를 넘을 수 없습니다.")
    .required("비밀번호는 필수 입력 사항입니다."),
});

export default function Yup(){
  const { register, handleSubmit } = useForm({
    // yup 과 useForm 연결
    resolver: yupResolver(schema),
    // 입력할 때마다 에러 메세지 출력
    mode: "onChange"
  });
  
  const onClickSubmit = (data) => {
    console.log(data);
  };
  
  return (
    // ...register("") 에 state 값을 넣으면
	// handleSubmit 이 state를 onclickSubmit 에 전달
    <form onSubmit={handleSubmit(onClickSubmit)}>
      이메일: <input type="text" {...register("email")} />
      <Error>{formState.errors.email?.message}</Error>
      비밀번호: <input type="password" {...register("password")} />
      <Error>{formState.errors.password?.message}</Error>

		// 모든 값이 들어왔을 때 formState.isValid = true 가 된다.
      <LoginButton isActive={formState.isValid}>로그인하기</LoginButton>
    </form>
  );
}

共通構成部品

コンポーネントにinputやbuttonなどの要素を作成し、必要な場所にインポートして使用できます.この場合、任意の変更があれば、共通の構成部品を変更するだけで済むので、煩雑な作業を行う必要はありません.

// 공통 input 컴포넌트
export default function Input01(props: Iprops) {
  return <Input type={props.type} {...props.register} />;
}

// 공통 button 컴포넌트
export default function Button01(props) {
  return <Button isActive={props.isActive}>{props.title}</Button>;
}

return (
    <form onSubmit={handleSubmit(onClickSubmit)}>
      이메일: <Input01 type="text" register={register("email")} />
     // 여기서 작성하는 type="text" 는 html input 태그의 속성값이 아니라 props이기 때문에 
     // 꼭꼭 props 로 넘겨줘야 적용이 가능하다
      <Error>{formState.errors.email?.message}</Error>
      비밀번호: <Input01 type="password" register={register("password")} />
      <Error>{formState.errors.password?.message}</Error>
      <Button01 isActive={formState.isValid} title="로그인하기" />
    </form>
  );