스타일 컴포넌트 props 의 사용

내가 기존에 적었던 코드는 다음과 같다.

로그인 기능에서 인풋의 value 가 조건을 충족해야만 버튼이 활성화-> 마우스 포인터의 활성화, 버튼의 색상이 변화하는 기능이다.

 const isAllValueValid = () => {
    const isAllValueValid = isEmailValid && isPasswordValid;
    return isAllValueValid;
  };
  
 return (
      <BasicLoginButton
        type="submit"
        className="submitLoginInfoBtn"
        disabled={!isAllValueValid()}
        backgroundColor={
          isEmailValid && isPasswordValid ? '#1D1D1D' : '#CBCBCB'
        }
        cursor={isEmailValid && isPasswordValid ? 'pointer' : 'default'}
      >
        로그인
      </BasicLoginButton>
  )

첫번째로, 이제는 함수형 컴포넌트를 쓰게되었기 때문에 return 상단 (함수의 내부) 에 isAllValueValid 라는 함수를 선언해 disabled={!isAllValueValid()} 로 함수의 리턴값을 선언 할 필요가 없다.

함수 대신 바로 이렇게 적어주면 된다.

const isAllValueValid = isEmailValid && isPasswordValid;

또한, 커서의 포인터 기능과 버튼의 색상 변화는 버튼이 disabled 상태이냐 , 아니냐에 따라 조정되는 부분이다. 따라서 하단의 스타일 컴포넌트에 props로는 disabled의 값만을 넘겨주어 스타일을 처리해주면 된다.

수정한 코드는 다음과 같다.

 const isAllValueValid = isEmailValid && isPasswordValid;

  return (
      <BasicLoginButton
        type="submit"
        className="submitLoginInfoBtn"
        disabled={!isAllValueValid}
      >
        로그인
      </BasicLoginButton>
  )

const BasicLoginButton = styled.button`
  background-color: ${props => (!props.disabled ? '#1D1D1D' : '#CBCBCB')};
  cursor: ${props => (!props.disabled ? 'pointer' : 'default')};
`