[React] 리뷰 - 조건부 렌더링

코드리뷰를 받던 중 리액트의 조건부 렌더링을 단편적으로만 이해한 것 같아
정리할 위해 글을 남깁니다.

이번에 인스타그램 로그인 페이지를 구현할 당시 input 값이 변경될 때마다 onKeyUp 이벤트를 통해 유효성 검사를 하도록 했습니다.

const handleKeyUp = e => {
    if (regEmail.test(inputs.id) && inputs.pwd.length > 4) {
      loginBtnColor.current.style.backgroundColor = '#0095f6';
      loginBtnColor.current.disabled = false;
    } else {
      loginBtnColor.current.style.backgroundColor = '#c4e1fb';
    }
  };

하지만 위와 같은 방법은 이메일 input 과 id input에 값이 입력될 때마다 이벤트를 실행하기 때문에 효율적이지 못한 코드였습니다.

따라서 변수를 선언한 이후, 해당 변수에 유효성 검사값을 넣어주는 방법으로 했으며 이것이 가능했던 이유는 유효성 검사를 할 경우 input의 state를 통해 검사를 하게 되는데 state값이 바뀔 때마다 유효성 검사 또한 새로 진행하고 해당 값을 변수에 할당해주기 때문입니다.

그리고 위에 코드를 보면 useRef를 통해 dom에 접근해서 유효성 검사 여부에 따라 색상을 바꾸어주고 있는데 이 방법 역시 좋은 방법은 아닙니다. 더 나은 방법은 로그인 유효성 검사를 통과할 경우 클래스 명에 조건부 렌더링을 통해 그려주는 것이 기존 방법보다 더 효율적이었습니다.

const loginValidation = regEmail.test(inputs.id) && inputs.pwd.length > 4;

<button className={loginValidation ? 'loginBtn ready' : 'loginBtn'}
             type="submit"
              ref={loginBtnColor}
         disabled={loginValidation ? false : true}
>

loginValidation은 input 값의 변화에 따라 그에 맞는 값을 할당받을 것이며 해당 변수의 값을 통해 className 과 button 의 disabled 속성에 조건을 걸어주었습니다.

단지 if 문의 조건을 변수로 빼냈을 뿐인데 코드가 훨씬 깔끔해졌습니다. 이번 리뷰를 통해 이것 외에도 많은 것을 배울 수 있었고 코드를 작성함에 있어 스스로에게 현재 코드를 더 다듬을 수 있을지 고민하는 습관을 길러야 할 것 같습니다.