[1st 팀 프로젝트] Bang & Olufsen 기록하고 싶은 코드

Kate Jung·2021년 1월 24일
4

Projects

목록 보기
9/10
post-thumbnail

> 전체코드

https://github.com/wecode-bootcamp-korea/bang_olaf-frontend/blob/main/src/Pages/Account/Account.js

1. input msg 로직 구현

회원가입 페이지 기준

1-1. 메소드 구현

구현 요약

  • text type input

    1. 각 인풋의 onChange에 따라 값을 저장하는 state를 업데이트(setState 활용)한 후,
    2. 값의 유무 & 2차 조건을 검사하는 메소드를 콜백함수를 통해 점검 및 state 업데이트(setState 활용) .
  • checkbox type input

    1. onClick을 통해 true or false를 점검하는 동시에 msg 컨트롤하는 state(${name}hasValue)도 같이 업데이트(setState 활용)

      ⇒ 같이 업데이트 하는 이유

      ${name}hasValue 는 단지 처음 load할 때, msg가 화면에 뜨지 않게 할 뿐, 이 후부터는 [name]과 같은 값을 담는다.

코드

    // 1. text인풋 onChange 메소드
      handleInput = (e) => {
        const { name, value } = e.target;
        this.setState(
          {
            [name]: value,  // 1-(1). value 값 입력
          },
          () => this.checkValidity(`${name}hasValue`, this.state[name]),  // 1-(2). [콜백 함수] 메소드 연결
        );
      };

      // 1-2. 인풋 값 유무 및 이메일/비번/비번확인 조건식 업데이트
      checkValidity = (keyValue, inputValue) => {
        const { email, password, checkPw } = this.state;
    		
    		// input 유형 2 : email의 추가 validation (정규 표현식)
        const emailcheck = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i.test(
          email,
        );
    		// input 유형 2 : password의 추가 validation (정규 표현식)
        const passwordcheck = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{8,}$/.test(
          password,
        );
    		// input 유형 2 : checkpw의 추가 validation (password와 일치)
        const checkpwcheck = password === checkPw;

        this.setState({
          [keyValue]: inputValue.length > 0,  // input 유형 1 : 값 유무만 체크 (text)
          emailcheck,
          passwordcheck,
          checkpwcheck,
        });
      };

      // 1. checkbox인풋 onClick 메소드
      handleCheckbox = (e) => {
        const { name, checked } = e.target;
        this.setState({
          [name]: checked,                    // input 유형 1 : 값 유무만 체크 (checkbox)
          [`${name}hasValue`]: checked,       // [name] & [`${name}hasValue`] 동시 체크
        });
      };

공통 구현

  • [e.target.name]: e.target.value or e.target.checked

    • 해당 input에 해당 값을 넣어 줌
  • [e.target.name]hasValue state

    • 기능

      • 의미

        해당 input에 값이 있는가?

      • msg 가림막

        처음 화면 load될 때, input이 빈 값이어도 msg가 뜨지 않게 해줌.

      • msg 컨트롤

        • 키 값:

          true ⇒ msg 안 보임

          false ⇒ msg 보임

유형 별 구현

  • text vs checkbox input

  • 3가지 input 유형

1. 값 입력 또는 체크만 하면 되는 input

  • input : 이름, 성, 서비스 동의

  • text input

    • [keyValue]: inputValue.length > 0

      ${name}hasValue : this.state[name] 의 값이 있으면 true

  • checkbox input

             this.setState({
                [name]: checked,
                [`${name}hasValue`]: checked,
             })

2. 값 입력 외 추가 validation이 있는 input

  • input : 이메일, 비밀번호, 비밀번호 확인
  • 1-2. 참고

3. 필수 입력이 아니지만 체크 시 back에 정보를 전송 해야 하는 input

  • input : 광고 동의
  • state에 true, false 담고 back에 전송

1-2. return 내부 구현

  • email 구현 예시

코드

Account.js

<div className="email accountTextInput">
                    <p>이메일</p>
                    <div className={`checkemail ${email && "success"}`}>             // 1. scss로 컨트롤
                      <input type="text" name="email" onChange={this.handleInput} />
                      <p className="warningMsg">
                        {!emailcheck && (                                            // 2.
                          <p className="warningMsg">
                            유효한 이메일 형식이 아닙니다.
                          </p>
                        )}
                      </p>
                    </div>
                    {!emailhasValue && (                                             // 3.
                      <p className="warningMsg">이메일은 필수 입력 항목입니다.</p>
                    )}
                  </div>

Account.scss

    .checkemail {
                p {
                  display: none;
                }
                &.success {
                  p {
                    display: block;
                  }
                }
              }

코드 해석

  • 1~2. className으로 msg 출현 결정하는 div

    1. email 값 들어오기 전

      • className = checkemail

      • p 태그

        display: none;

    2. email 값 들어온 후

      • className = checkemailsuccess

      • p 태그

        display: block;

    3. emailcheck 점검 (조건부 렌더링 활용)

      • true일 때

        안보임

      • false 일 때

        msg 보임

  • 3. 값의 유무(emailhasValue)에 따라 msg 출현

    • 조건부 렌더링 활용

    • 2차 조건문 확인 div(className = checkemail) 밖에 존재

      ${email && "success"} 에 대한 영향 받지 않기 위해

2. back으로 보내기 전, 모든 로그인 조건 검사 로직

코드

    // button의 onClick 메소드
    handleBtn = () => {
        const {
          firstname,
          lastname,
          email,
          emailcheck,
          password,
          passwordcheck,
          checkPw,
          checkpwcheck,
          serviceagreement,
        } = this.state;

        // [변수] 모든 조건 일치 여부 검사
        const allAcceptedAccountCondition =
          firstname &&
          lastname &&
          emailcheck &&
          passwordcheck &&
          checkpwcheck &&
          serviceagreement;

        // 3-1. 모든 조건 미일치 시
        if (!allAcceptedAccountCondition) {
          //alert("allAcceptedAccountCondition 실패");

          // 3-2. 인풋 창 Warning Msg 나타내기 위한 코드
          this.setState({
            firstnamehasValue: firstname,
            lastnamehasValue: lastname,
            emailhasValue: email,
            passwordhasValue: password,
            checkPwhasValue: checkPw,
            serviceagreementhasValue: serviceagreement,
          });
        } else {
          // 3-1. [메소드 실행] 모든 조건 일치 시 fetch함수 실행
          this.fetchSignup();
        }
      };

구현

  • if - else if 구조
    • 모든 조건을 검사하는 조건변수(allAcceptedAccountCondition) 사용 구조를 최대한 간단하게 구성.
  • [변수] 모든 조건 일치 여부 검사

    • 2차 조건이 있는 input은 2차 조건 실행 여부를 담은 state로 검사

      → 값이 있어야 조건 실행 가능

      [name]hasValue 생략

  • 3-1. [메소드 실행] 모든 조건 일치 시 fetch함수 실행

    • 메소드 사용으로 기능 별 분리
  • 3-2. 인풋 창 Warning Msg 나타내기 위한 코드

    • 문제

      [name]hasValue 의 기본값: true

      [name]hasValue 에 따른 msg가 나오지 않음

    • 해결

      실제 값을 넣은 state를 통해 검사

    • 참고

      • 2차 조건의 msg

      • 이미 msg가 나와있다.

      • how?

        onChange에서 걸린 validation 검사 메소드로 msg가 나와 있고 값을 입력했기에 [name]hasValue 가 true가 되어 setState가 필요 없음

profile
복습 목적 블로그 입니다.

1개의 댓글