코드캠프 부트캠프 24일차

useApolloClient

쿼리는 컴포넌트가 열리면 실행되는 useQuery,
원하는 시점에 실행 해줄 수 있는 useLazyQuery,
axios처럼 원하는 위치에서 받을 수 있게 도와주고 결과를 내가 원하는 변수에 담아 줄 수 있는 useApolloClient

원하는 시점에 query요청을 보내고 useApolloClient의 특징을 활용한다면 fetch된 데이터의 결과값을 Globalstate에 담아 사용할 수 있다.

      const resultUserInfo = await client.query({
        query: FETCH_USER_LOGGED_IN,
        context: {
          headers: { Authorization: `Bearer ${accessToken}` },
        },
      });

client.query({})로 요청을 보내고, 어느 정보를 불러올지 인증 정보를 함께 보내야 하기 때문에 client.query의 contextdml headers에 Authorization 정보를 함께 첨부해 주었다.

React-Hook-Form

스프레드연산자, onChangeInput, state 등의 폼들을 미리 만들어 놓고, 라이브러리 형태로 제공해 주는 것이 폼 라이브러리 인데, 그 중 최근 함수형 컴포넌트에서 가장 많이 사용되는 폼 라이브러리이다.
React-Hook-Form은 비제어 컴포넌트 방식으로, 제어컴포넌트 방식보다 100% 정확도 보장할 수는 없지만 state값이 바뀌는 상황마다 렌더링 하는 과정이 없기 때문에 빠른 장점이 있다.

yup

검증 라이브러리로 정규표현식 또는 length를 기준으로 한 최소/ 최대글자수, 이메일 형식 확인 등의 조건을 쉽게 추가할 수 있다. 또한, 검증 라이브러리와 폼 라이브러리는 서로간에 독립적으로 사용될 수 있다.
hookform/resolvers yup을 설치를 하게 되면 react-hook-form과 yup을 함께 사용할 수 있게된다.
yupResolver()를 useForm({}) 내부 resolver에 넣어주고, 규칙들을 schema라는 변수에 지정해주어 yup.object().shape({})설정을 한다면 입력값의 규칙을 정해줄 수 있다.
formState안에 isValid라는 키값이 있는데 조건들을 모두 만족할 경우 참을 반환하므로 formState.isValid를 활용하여 값이 모두 올바르게 입력되었는지 검증할 수 있다.

Common-Componenet

자주쓰이는 input태그와 button태그의 경우 컴포넌트로 따로 만들어 놓고 import하여 사용하는 것을 공통컴포넌트라고 한다. 이렇게 함으로써 특별한 날, 혹은 다른 이유로 인해 전체적인 화면 분위기를 변경해야할때 Common-Component를 변경한다면 해당 컴포넌트가 포함된 모든 태그들이 모두 변경된 설정으로 적용이 된다.

const schema = yup.object().shape({
  email: yup
    .string()
    .email("이메일 형식이 아닙니다.")
    .required("이메일은 필수입력사항입니다"),
  password: yup
    .string()
    .min(4, "비밀번호는 최소 4자리 이상 입력해 주세요.")
    .max(15, "비밀번호는 15자리를 넘어갈 수 없습니다.")
    .required("비밀번호는 필수입력사항입니다."),
});

export default function ReactHookFormYupPage() {
  const { register, handleSubmit, formState } = useForm({
    mode: "onChange",
    resolver: yupResolver(schema),
  });

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

  return (
    <form onSubmit={handleSubmit(onClickSubmit)}>
      <div>
        <Input01 type="text" register={register("email")} />
        <div>{formState.errors.email?.message}</div>
      </div>
      <div>
        <Input01 type="password" register={register("password")} />
        <div>{formState.errors.password?.message}</div>
      </div>
      <Button01 type="submit" isValid={formState.isValid} name="로그인" />
    </form>
  );
}