Day 24.

[複数のクエリー方法]

1π
2▼UseLazyQuery:レンダリングまで必要に応じて自動的に/{data}=UseQueryを実行
3樓ユーザーApolloClient:任意の時間に実行でき、axiosのように結果を必要なボックス結果などにロードできる
今日の目標
ログインに成功したら、ユーザー情報をuseQueryに戻すのではなく、GlobalContext送信に入れます.
userQueryは、要求されたデータが入ったときにレンダリングされます.だからどこでも使えない.
ユーザーApolloClientはどこでも利用可能で、箱に入れることができます.
Login accessTokenとuserInfoは両方送信|67916|1ℋLogin-accessToken受信
2️⃣ userInfo - client.queryのcontextのheaders内部にライセンス情報を添付して送信
3▼▼Global State–結果値をGlobalContext AnsetUserInfoに入れる
4πlocalStorage-JSONは、refreshTokenを学ぶまでuserInfoを含みます.stringfyでItemを設定する
Login Success
グローバル・ステータスでのユーザー情報の受信

[フォームライブラリレスポンス-レスポンス-レスポンスフォーム]

1.制御素子vs非制御素子

제어컴포넌트 controlled component
:イベントオブジェクトを使用してsetState()として値を保存し、ユーザー入力を受信した構成部品に値を保存します.ユーザー入力の値は保存した値とリアルタイムで同期します.
ААААААААААААА
📌 react-form비제어컴포넌트 uncontrolled component
:非制御構成部品はDOM自体でフォームデータを処理するため、値はリアルタイムで同期できません.制御素子方式で使用するsetState()ではなくrefで値を取得する
勘定科目の勘定科目stateを使用しないため、速度は速くなりますが、正確性は低下する可能性があります.大量のデータを迅速に処理
📌 react-hook-form

2. react-hook-form

React-Hook-Form
最近の関数型コンポーネントで最も一般的なフォームライブラリは、ページ切り替えを必要とせずにデータのみを交換するajax(非同期javascript通信)方式です.
AJAXは非同期JavaScriptとXMLです.簡単に言えば、XMLHttpRequestオブジェクトを使用してサーバと通信します.JSON、XML、HTML、プレーンテキストフォーマットなど、さまざまなフォーマットを交換できます.AJAXの強力な機能は「非同期」で、ページ全体をリフレッシュする必要はありません.この非同期性を使用すると、ページ全体のイベントではなく、一部だけを更新できます.
ajaxの利点
1.Webページ全体を再ロードする必要はなく、Webページの一部を更新するだけです.
2.Webページのロード後、サーバへのデータ要求の送受信が可能
3.バックグラウンド領域でサーバにデータを送信できる

1インストール

$ yarn add react-hook-form

2▼▼基本製作

1. useForm
register-onChange、onClick、onErrorなどを含む)
handleSubmit-コミット時のイベントの処理
formState:{errors}などの読み込み
2. form tag
入力値を受け取ったinputタグを囲み、onSubmit関数を接続します.
📌 ボタンのdefult typeはsubmitで、ボタンを押すとフォームに接続されたonSubmitの関数(ex.onClickSubmit)が実行されます.他の機能を追加する場合は、type= "button"を指定し、関数を接続する必要があります.
3. { ... register}
スプレッドシート演算子としてinputをインポートし、名前とともにinputに挿入します.formStateに含まれる値やErrorなどがあります.
4. handleSubmit
登録されたデータを一緒に実行する必要があるため、関数をhandleSubmitにパッケージ化します.
useFormコンテンツseForm({}))のモードを追加します.「onChange」は、エレメントの切断によるレジスタ接続を維持するために変化をチェックする役割です.
... 理解できなかったので検索したらホームページで良かった(英語で)🥲)

[検証ライブラリYup]

1インストール

$ yarn add yup

react-hook-form과 함께 사용하기 위해 추가(schemaValidation)
$ yarn add @hookform/resolvers

📌 検証ライブラリとフォームライブラリは独立して使用できるため、react-hook-form以外のフォームライブラリを使用できます.

2▼▼基本製作

1. import yup
2.解析器の設定
yupResolverをインポートしてuseForm({})内部解析器に入れる
3.作成モード

yup.object( ).shape({})設定

yupResolver()に入れ、react-hook-formに関連付け

const schema = yup.object().shape({
  myEmail: yup
    .string() 📌 string 형식 지정
    .email("이메일 형식이 적합하지 않습니다") 📌 email 형식 지정, 에러메세지 설정
    .required("이메일은 필수 입력 사항입니다"), 📌 필수 항목 지정
  myPassword: yup
    .string() 📌 string 형식 지정
    .min(4, "비밀번호는 최소 4자리 이상입니다") 📌 password 형식 지정, 에러메세지 설정
    .max(15, "비밀번호는 최대 15자리입니다")
    .required("비밀번호는 필수 입력 사항입니다"), 📌 필수 항목 지정
});

4. 5. formState
formStateは次のとおりです.
dirtyFields、touchedFields、isSubmitted、isSubmitSuccess、isSubmitting、SubmitCount、isValid、errorsなど様々な機能があり、isValidを使用して検証し、errorsでエラーメッセージを表示

[共通構成部品Common-Component]

공통 컴포넌트 :
各ページに共通のinputやbuttonなどを直接作成するのではなく、コンポーネントとしてインポートして使用します(ex.kmonstory book)
このような利点は、特別な日や他の理由で画面全体の雰囲気を変える必要がある場合、共通コンポーネントを変更することで、すべてのボタンを全面的に適用できることです.1ページごとにやってしまうと、変更しにくく、戻りにくくなります.