๐ŸŒ• TIL 0216

j00b33ยท2022๋…„ 2์›” 16์ผ
0

CodeCamp FE 05

๋ชฉ๋ก ๋ณด๊ธฐ
25/33

โฌ‡๏ธ Main Note ๐Ÿ˜ฎโ€๐Ÿ’จ
https://docs.google.com/document/d/1QCSiibbYKcOw35XZU76mCzCFrFAsWgEhbsjzKIq-AI0/edit


โœจ [useApolloClient]

useQuery

  • When component is executed, the request is sent right away.

useLazyQuery

  • Can assign the point where the query is operated. (Doesn't have to be executed right away)
  • Can be used as mutation
  • Similar to useQuery

โ˜พ useAoplloClient

  • Can assign the point where the query is operated. (Doesn't have to be executed right away)
  • Similar to axios
    --> When requested, data can be put into state or result or whereever the user wants.
  • Can be used as mutation

๐Ÿ’ซ Usage

With useApolloClient, the user can put the result of fetchUserLoggedIn, which is userInfo, into GlobalState.

  • To do so, I requested in onClickLogin with client.quert({})

    --> The point is that there must be information of Authentication should be sent together to get the right information.

  • So inside the header of client.query's context, authorization info was sent together. And the result of it was put into setUserInfo of GlobalContext.

  • That userInfo was put into localStorage by setItem with JSON.stringfy.


โœจ [Form Library]

  • The collection of forms that we've made: something like onChangeInput, onChangeClick, state, etc.
  • ex) react-form --> redux-form --> formik --> react-hook-form
  • React-Hook-Form is mostly usen form library among functional components.

๐Ÿ’ซ Controlled Component vs. Uncontrolled Component

Controlled

  • React-form, redux-form
  • This has higher accuracy of change in state or inputs.
    --> Thus, mostly used in important inputs.
  • But slow

Uncontrolled

  • React-hook-form
  • Can really tell that the accuracy of change in input is 100%.
  • But faster because re-rendering doesn't happen for each change in input.

๐Ÿ’ซ React-Hook-Form

  • ajax: async javascript (๋น„๋™๊ธฐ ํ†ต์‹ )
  • The input tags were encompassed with <form> tag.
  • The input was saved through useForm() in state.
    --> Register function was spread to input. Register contains onChange, onClick, onError, etc.
  • The results were saved in formState.
  • onSubmit() function was linked to form tag, and inside the form tag, I put the button.
  • This button has the default value of "submit", so when I click the button, onSubmit() function is executed, which is linked to form tag.
    --> Since the default type is submit, if the user wants to make a different type of button, the code must be written as type="reset".
  • But the function cannot be put alone since all the data that I saved should be executed together.
    --> So the function was encompassed with handleSubmit.

  • mode: "onChange" goes inside useform({}).
    --> It checks the change and helps sustain the connection of register when component is divided.

โœจ [Yup]

: Validation library
Yup helps to use the regular expressions in easier way.


profile
์ฝฑใ…†l

0๊ฐœ์˜ ๋Œ“๊ธ€