220414

여러가지 쿼리 방식

useQuery

해당 컴포넌트가 화면에 그려질 때 api 요청이 날아간다. 요청에 따른 data 를 받아오면 화면이 자동으로 그려지도록 만들어 준다. 요청 및 그림 모두 자동

useLazyQuery

함수를 만들 수 있다. 함수를 실행할 때 데이터 요청이 날아가고, data를 받아오면 그 다음부터 작동 방식은 useQuery와 같다. 즉, useQuery와 동일하지만 실행하는 곳을 선택할 수 있다는 점에서 차이가 있다. 요청 수동 그림 자동

useApolloClient

useQuery를 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 : 입력한 값 제출
• button : 바인딩 된 onClick 실행

button type 의 default 값은 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(boardAddress.addressDetail} 입력시 객체 형태로 들어간다.

yup

입력받은 값이 조건에 맞는지 검증해준다. yup 은 react-hook-form에 종속된 라이브러리가 아니기 때문에 단독으로 다른 라이브러리와 함께 사용이 가능하다.

yarn add @hookform/resolvers yup hookform/resolvers 와 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 같은 요소들을 컴포넌트에 만들어 필요한 곳에 import 해서 사용할 수 있다. 이 경우 수정 사항이 있을 경우 공통 컴포넌트만 수정하면 되기 때문에 번거롭게 작업하지 않아도 된다.

// 공통 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>
  );