6월 10일

HSKwon·2022년 6월 10일

🚀 정규표현식 내용 정리 🚀

-정규표현식은 양옆에 "//"를 쓰고 검증하는것

apple이 apple과 동일한지를 테스트 돌렸더니 true값이 반환되었다

그런데 apple과 "applelame"가 동일한지를 테스트 돌렸더니 마찬가지로 true값이 반환되고있음
=>💡 apple과 일치하는게 하나라도 있으면 true값이 반환된다(일부분만 포함되어있어서 맞으면 true인 것이다.)

✉️ 이메일을 정규표현식으로 검증해보자

역슬래시를 붙여서 \w 라고 쓰면 하나의 문자 혹은 숫자를 뜻한다

일부분만 포함되어있어서 맞으면 true라고 해줌

\w가 "하나"있고, 뒤에 @가 있고 .com으로 끝나게 해달라는 뜻임

만약 문자가 10개 넘게 있으면...? \w를 열번 써주는게 아니라 \w+라고 써주면됨. 그랬더니 true값을 반환하고 있음
🤔 한개가 있을수도 있고 없을수도 있을땐 ? => "?"
🤔 한개도 없거나 한개이거나 여러개일땐 ? => "*"

그러면 /^\w+@\w+.com$/.test("qqq@qqq.com") 라고 쓰면 이메일 검증이 완료인가?
(하나이상의 문자 + @ + 하나이상의문자 + .com)
⭐️하지만 "."이라는 것은 모든것이 가능하다는 의미를 나타냄
그렇다면 "모든것"을 의미하는 의미를 탈피해서 "\"를 붙여주면 된다. "\.\"

⭐️결국 이메일을 검증하는 최종 로직은 /^\w+@\w+.\w+$/.test("qqqqqqqq@qqqqqq.com")

📱 핸드폰 번호를 정규표현식으로 검증해보자
/010-1111-1111/.test("010-1111-1111")
//true를 반환
/^\w+-1234-5678$/.test("asdfasdf-1234-5678")
//true를 반환
핸드폰 번호에는 숫자만 들어가야한다 ➡️ \w가 아니라 \d를 써야한다

💭 자릿수를 정해주려면 그 뒤에 { } 안에 써주면 됨!!!
그렇다면 3자리 숫자를 의미하는 건 \d{3} 임

💭 가령 휴대폰 번호 중 가운데 부분은 3자리 혹은 4자리가 될 수 있음!!
그렇다면 3 또는 4 가 들어가야 하므로 \d{3,4} 라고 써주면 된다
⭐️결국 휴대폰 번호를 검증하는 최종 로직은
/^\d{3}-\d{3,4}-\d{4}$/.test("010-1234-1234")

🤔 똑같은 원리로 "2018.01.01"과 같은 날짜 형식을 검증하려면......?
/^\d{4}.\d{2}.\d{2}$/.test("2022.06.10")
과 같이 써주면 됨

1️⃣ 첫번째시간

HoF

((참고_HoC설명))

HoF

onClickMove 누르면 (el.id)에 해당하는 바나나 20개가 콘솔로 찍힐것임

내부의 스코프가 끝나야 다음 스코프가 끝나고 그 스코프가 끝나야 다음 스코프가 끝나게 됨.... 내부의 스코프가 끝나기를 기다리게됨
내부 함수는 바로바로 종료될 수 있는 프로그램이여야함!!!!

2️⃣ 두번째시간

폼라이브러리
react-form
redux-form
formik(편리하지만 사용법이 어려움)
react-hook-form을 사용해보자

💡 컴포넌트

-1.제어 컴포넌트 (controlled)(한글자 토씨도 틀리면 안되는 비번과 같은 값 다룰때 사용)
-2.비제어 컴포넌트 (uncontrolled)(일반적으로 비제어를 사용함 / React Hook Form)

🚀 제어 컴포넌트

인풋창에 입력할때마다 state에 저장되지만 입력 값이 많아지면 state 저장값과 달라질 수 있음
따라서 input의 value에 writer를 넣어줌으로써 입력해서 state에 들어가는 값과 input의 값이 100% 일치한다는 확신을 얻을 수있음
(완벽하게 input이 통제되어 있는 상태)

⭐️ input에 한글자 한글자 칠때마다 state가 변하게 되므로 리렌더가 계속해서 일어나게됨(콘솔로 확인 가능) => 성능이 느려지게됨!!!

===> state를 지우고 document.getElementById 또는 useRef를 이용해서 가져오게 되면 리렌더가 일어나지 않게 되어서 성능이 더 빨라지게 되는 장점이 존재함 // ‼️하지만 입력된 값과 인풋창에서 가져온 값이 100% 일치한다는 확신을 얻을 수 없음‼️

🚀 비제어 컴포넌트 (React Hook From)

3️⃣ 세번째시간

react-hook-form이용!!!
이메일 입력 형식이 알맞지 않으면 아래쪽에 빨간색깔로 글씨 띄워주는 걸 해보자

> 💡 yup(을 reach-hook-form과 같이 써보자) (yup은 독립적으로도 사용가능함)

import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
import styled from "@emotion/styled";
import { PropertySafetyFilled } from "@ant-design/icons";

const Error = styled.div`
  color: red;
  font-size: 9px;
`;

const LoginButton = styled.button`
  background-color: ${(props) => (props.isActive ? "yellow" : "")};
`;
const schema = yup.object({
  email: yup
    .string()
    .email("이메일 형식이 적합하지 않습니다.")
    .required("이메일은 필수 입력 사항입니다."),
  password: yup
    .string()
    .min(4, "비밀번호는 최소 4자리 이상 입력해 주세요!")
    .max(15, "비밀번호는 최대 15자리로 입력해 주세요!")
    .required("비밀번호는 필수 입력 사항입니다."),
});

export default function ReactHookFormPage() {
  // 검증한 에러가 있다면 formState에 자동으로 들어옴
  const { register, handleSubmit, formState } = useForm({
    resolver: yupResolver(schema),
    // onChange 될 때 마다 검증할래
    mode: "onChange",
  });

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

  return (
    //   {} 함수넣는곳
    <form onSubmit={handleSubmit(onClickSubmit)}>
      {/* 레지스터 뿌려주고 state 이름만 적어주면 됨 */}
      {/* register에  writerstate가 가지고 있던 값이저장됨 */}
      이메일 : <input type="text" {...register("email")} />
      {/* 이메일에 에러가 없을 수 있기 때문에 옵셔널 체이닝으로 입력해주었음 */}
      <Error>{formState.errors.email?.message}</Error>
      {/* register에 title state가 가지고 있던 값이저장됨 */}
      비밀번호 : <input type="password" {...register("password")} />
      <Error>{formState.errors.password?.message}</Error>
      <LoginButton isActive={formState.isValid}>로그인 하기</LoginButton>
    </form>
  );
}

// **설명**
// 등록하기 누르면 onClickSUBMIT실행되는데 handleSubmit이 먼저 실행되서 ...register 안에다가 writer, title, contents state가 가지고 있는 data들을 집어넣어주게됨
// isActive 또한 이미 formState에 isValid라는 이름으로 내장되어 있는 기능이다. 따로 만들어줄 필요❌