회원가입 form 구현(2)_버튼 활성화

이전 포스트에서 유효성 검사를 구현하는 방법을 다루었다. 이번에는 폼의 입력값이 올바르게 입력되었을 때만 제출 버튼을 활성화 하는 방법에 대해 살펴보자.

1. 버튼 비활성화 상태 관리

useState를 사용하여 버튼의 활성화 상태를 관리한다. 기본으로 버튼은 비활성화되어있다.

const [isDisabled, setIsDisabled] = useState(true);

2. 유효성 검사 결과에 따른 버튼 활성화

useEffect를 사용하여 입력값과 에러 메시지의 상태 변화를 감지하고, 모든 입력 필드가 유효한 경우에만 버튼을 활성화한다. 이를 위해, 입력값이 비어 있지 않고, 모든 에러 메시지가 빈 문자열인 경우 버튼을 활성화하도록 설정한다.

useEffect(() => {
  const isFormValid =
    Object.values(value).some(filed => filed.trim() !== "") &&
    Object.values(errors).every(error => error === "");

  setIsDisabled(!isFormValid);
}, [value, errors]);

3. 제출 버튼 구현

버튼은 isDisabled 상태에 따라 활성화 또는 비활성화된다. disbled 속성에 isDisabled 상태를 설정하여 버튼의 활성화 상태를 제어한다.

<Button text="이메일로 시작하기" disabled={isDisabled} type="submit" />

disabled 를 props로 받아 활성화, 비활성화일 때의 스타일을 다르게 해준다.

const Button = () => {
  return (
    <StyledButton width={width} {...props}>
      {text}
    </StyledButton>
  );
};

export default Button;

const StyledButton = styled.button<{ disabled?: boolean; width: string }>`
  background-color: ${props =>
    props.disabled ? props.theme.colors.green50 : props.theme.colors.green200};
  color: ${props =>
    props.disabled ? props.theme.colors.green100 : props.theme.colors.gray500};
`;