[React] map메소드 안에서 각각의 다른 로직부여

이현범·2022년 7월 3일

WATCHA CLASSIC 프로젝트

목록 보기

3/3

이번 팀 프로젝트를 하면서 가장 많이 고민 했던 부분 입니다.

하나의 컴포넌트 안에서 map 메소드를 사용하여 로그인, 회원가입 모달창 각각의 input 창에 각각에 조건식에 맞게 효과를 부여해야 했습니다.

First step - 조건식을 활용하기 위해 각각의 입력된 값이 필요하다.

 const [loginUserInfo, setLoginUserInfo] = useState({
    email: "",
    password: "",
  });
 const { email, password } = loginUserInfo;

 const getUserInfo = e => {
    const { value, name } = e.target;

    if (type === "login") {
      setLoginUserInfo({ ...loginUserInfo, [name]: value });
    } else {
      setSignupUserInfo({ ...signupUserInfo, [name]: value });
    }
  };

const [signupUserInfo, setSignupUserInfo] = useState({
    signName: "",
    signEmail: "",
    signPassword: "",
    signBirth: "",
  });

 const { signName, signEmail, signPassword, signBirth } = signupUserInfo;

 const getUserInfo = e => {
    const { value, name } = e.target;

    if (type === "login") {
      setLoginUserInfo({ ...loginUserInfo, [name]: value });
    } else {
      setSignupUserInfo({ ...signupUserInfo, [name]: value });
    }
  };

로그인 과 회원가입 창 각각에 입력된 값을 loginIUserInfo 와 signupUserInfo 두개의 state 로 따로 저장 했습니다.
로그인, 회원가입 창 각각의 input 에 입력된 값을 state 에 저장하기 위하여 map 메소드 안 인풋 컴포넌트에 props 로 함수를 전달 하였습니다.

<input onChange={getUserInfo} />

Second step - input에 입력된 값을 조건식과 비교

각각의 input 에 조건식을 어떻게 적용 시킬지 고민을 많이 했습니다.
처음에는 Input 컴포넌트 안에서 각각의 조건문을 적용 시키려고 했지만 생각대로 되지 않았습니다.

⭐️ 문제해결

map 메소드를 사용하여 Input 컴포넌트를 반환하고 있었고 각각 다른 로직을 전달 하기 위해선 객체 를 사용해야 했습니다!

같은 팀의 백엔드 분이 작성해 주신 정규표현식을 사용하여 객체 안에 키의 값으로 함수를 정의하여 각각 입력된 input 값에 서로다른 로직의 결과를 전달 해줄 수 있었습니다.

const validator = {
    email: input => {
      const regExp =
        /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/;
      return regExp.test(input);
    },
    password: input => input.length >= 6,
    signName: input => input.length >= 2,
    signEmail: input => {
      const regExp =
        /^[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_\.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/;
      return regExp.test(input);
    },
    signPassword: input => {
      const regExp =
        /^((?=.*[A-Za-z])(?=.*\d)|(?=.*[A-Za-z])(?=.*[\^@$!%*#?&])|(?=.*\d)(?=.*[\^@$!%*#?&])).{10,}$/;
      return regExp.test(input);
    },
    signBirth: input => {
      const regExp =
        /^(19[0-9][0-9]|20[0-9][0-9])*-(0[1-9]|1[0-2])*-(0[1-9]|[1-2][0-9]|3[0-1])$/;
      return regExp.test(input);
    },
  };

validator 라는 객체 안에 input 의 type 을 key로 설정 합니다.
각 key의 value는 정규표현식 을 활용하여 유효성검사에 통과 할 경우 true 를 반환 합니다.
반환된 결과를 Input 컴포넌트 내에서 변수로 정의하여 사용 할 수 있습니다.

 // 부모 컴포넌트
 {inputData.map((input,idx) => (<Input handleValid={validator[input.type]} />

// map 메소드 안 자식 컴포넌트
 const isValid = handleValid(value);

valiedator[input.type] 은 handleValid 라는 props로 전달 해주며, 자식 컴포넌트는 inputData 라는 상수 데이터 배열에서
input[type] 의 값에 따라 다른 값이 변수로 들어가게 됩니다.
validator 객체 내의 매개변수 값을 자식 컴포넌트에서 isValid 라는 변수에 handleValid(value) 라고 정의 하여 value 값이 들어 갈 수 있도록 합니다.
Input 컴포넌트 내에서 isValid 변수를 사용하여 true 일 경우의 로직을 실행 시킬 수 있게 됐습니다.