[TIL] 2022년 02월 16일 - 로그인 Validataion

이번 시간에도 인증 토큰에 내용의 연속으로 인증 부분을 배웠다.

 

커리큘럼

• useQuery를 axios 처럼 사용할 수 있다! => useApolloClient
• 헉?! 폼을 자동으로 만들어준다고?! => React-Hook-Form
• Validataion 라이브러리가 따로 있다 => Yup
• 재사용을 위한 공통컴포넌트를 만들어보자! => Common-Component

우리가 그동안 useQuery를 단독으로 사용해서 학습하였는데 이것을 useQuery보다 한단계 더 높은 

최적화 방식의 useApolloClient를 사용할 것이다.

 

useQuery와 useLazyQuery useApollo의 차이점을 알아보면 

• useQuery는 내가 실행하고 싶을때 실행할 수 있다.
• useLazyQuery는 내가 실행하고 싶을때 실행 
• useApolloClient도 동일하게 원하는 시점에 실행이 가능하다.

라는 두가지의 차이점이 있다. 

 

결론은 useApolloClient는 내가 실행하려는 순간은 정해서 실행할 수 있다는 장점이 있다는 것,

기존의 useQuery는 그게 아이었다. 해당 컴포넌트가 실행되는 즉시 실행된다는 것 

{data} = useQuery // 자동실행
{data} = useLazyQuery // 내가 원하는 시점에 랜더링이 이뤄짐

// useLazyQuery는 useQuery와 가까우나 내가 원하는 시점에 실행히 가능하다.

// useApolloClient 내가 원하는 시점에 실행가능하고 원하는 상자에 넣을 수 있다. axios와 근접

  // 초기값은 비어있지만 type추론
    const [userInfo, setUserInfo] = useState<IUserInfo>({});
    const value = {
        accessToken,
        setAccessToken,
        userInfo,
        setUserInfo,
    };

우선 App.tsx에서 동일한 곳에 accessToken을 사용할 수 있게 app.tsx에서 선언해주었다. 

interface IGlobalContext {
    acessToken?: string;
    setAccessToken?: Dispatch<SetStateAction<string>>;
    userInfo?: IUserInfo;
    setUserInfo?: Dispatch<SetStateAction<{}>>;
}

선언해주기위한 type도 app.tsx에서 타입을 정해준다.

    const { userInfo } = useContext(GlobalContext);
    // if (!localStorage.getItem('accessToken')) {
    //     alert('로그인');
    //     router.push('/22-05-login-check');
    // }

이전과 같이 파일 하나에 localStorage를 선언할 필요없이 app.tsx에 선언된 것을 useContext를 통해 가져오면 된다.

React Hook Form 

프로젝트를 구현할때 폼을 직접 구현하기 보다 npm에서 정해진 라이브러리를 사용하면 state도 줄기때문에 

아주 유용하다.

 

React From 라이브러리는 여러가지가 있는데 우리는 그 중 하나인 React-Hook-fom을 사용해볼 것이다.

React-hook-form을 class 방식에서도 많이 사용되고 있다.

 

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

우선 react-hook-form을 사용하기 위해 안에 있는 useForm을 import 해온다.

interface FormValues {
    myWriter?: string;
    myTitle?: string;
    myContents?: string;
}

react-hook-form을 사용하기위해 각각의 type을 지정해주고 

const { register, handleSubmit } = useForm();

    const onClickSubmit = (data: FormValues) => {
        // 데이터를 그냥 실행하지 않고 데이터를 가지고 submit
        console.log(data);
    };

hook-form 기능에 regeister와 handleSubmit 기능을 가져온다.

        <form onSubmit={handleSubmit(onClickSubmit)}>
            작성자: <input type="text" {...register('myWriter', { required: true })} />
            제목: <input type="text" {...register('myTitle')} />
            내용: <input type="text" {...register('myContents')} />
            {/* onClick을 두번 주면 의도치 않은 에러 발생 */}
            <button type="button">등록하기</button>
            <ButtonBase>ads</ButtonBase>
            {/* <button type="button" onClick={}>나만의 버튼</button> */}
        </form>

react-hook-form은 form이라는 태그안에서 onSubmit 함수를 실행해주면 밑에서 onClick을 지정하지 않아도 

동일하게 작동된다.

react-hook의 장점은 기존의 useState로 구현한 것 보다 렌더링 속도가 빠르다는 장점을 가진다.

 

yup을 이용해 validataionInputs 구현

 

yup이라는 라이브러리를 사용하면 기존의 onChange를 이용해서 많은 코드로 로그인 검증을 한것을 짧은 코드로 

구현해줄 수 있다.

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

우선 yup을 사용하려면 yup과 yupResolver 라이브러리가 필요하다.

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

yup을 사용하는 방법에는 이메일을 검증하는 myEmail 것과 password 검증하는 myPassword로 선언해주면 

그안에 조건만 넣어주면 적용이 된다.

 <form onSubmit={handleSubmit(onClickSubmit)}>
            이메일: <input type="text" {...register('myEmail')} />
            <div>{formState.errors.myEmail?.message}</div>
            비밀번호: <input type="text" {...register('myPassword')} />
            <div>{formState.errors.myPassword?.message}</div>
            {/* onClick을 두번 주면 의도치 않은 에러 발생 */}
            <MyButton isValid={formState.isValid}>로그인</MyButton>
            {/* <ButtonBase type=""></ButtonBase> */}
            {/* <button type="button" onClick={}>나만의 버튼</button> */}
 </form>

input안에 ...register 괄호 안에 값을 넣어주면  validation이 적용된다.