React - 로그인/회원가입 기능에 UX디자인을더하기

panxoat08_·2020년 12월 29일
1
post-thumbnail

이번 포스팅 내용은 API 호출 동작을 수행하는 버튼 및 그 외 Input Box를 UX적 퀄리티를 높일 수 있는 방법을 담고 있습니다.

TypeScript와 Styled-component를 사용하고 있습니다.

예시는 아래와 같습니다.

초기 소스코드

const Index = () => {

  return (
    <Wrap>
      <Input placeholder="인증번호" />
      <Button>제출하기</Button>
    </Wrap>
  );
};

export default Index

const Wrap = styled.div`...`
const Input = styled.input`...`
const Button = styled.button`...`

useState 사용하기

const Index = () => {
  const [disable, setDisable] = useState<boolean>(false);
  const [loading, setLoading] = useState<boolean>(false);
  
  return (
    <Wrap>
      <Input placeholder="인증번호" disabled={disable}/>
      <Button>제출하기</Button>
    </Wrap>
  );
};

Material-ui 사용하기

...
import CircularProgress from '@material-ui/core/CircularProgress';

const Index = () => {
  const [disable, setDisable] = useState<boolean>(false);
  const [loading, setLoading] = useState<boolean>(false);

  return (
    <Wrap>
      <Input placeholder="인증번호" disabled={disable} />
      <Button onClick={handleSubmitBtn}>
        {loading ? <CircularProgress size={20} color="primary" /> : '제출하기'}
      </Button>
    </Wrap>
  );
};

progress 활용하기 - 전체코드

const Index = () => {
  const [disable, setDisable] = useState<boolean>(false);
  const [loading, setLoading] = useState<boolean>(false);

  const handleSubmitBtn = () => {
    setDisable(true); //inputBox 비활성화
    setLoading(true); //API fetch loading

    setInterval(() => {
      setLoading(false); //loading off
    }, 800);
    // TODO API call
  };

  return (
    <Wrap>
      <Input placeholder="인증번호" disabled={disable} />
      <Button onClick={handleSubmitBtn}>
        {loading ? <CircularProgress size={20} color="primary" /> : '제출하기'}
      </Button>
    </Wrap>
  );
};

setInterval를 사용해서 loading progress가 작동하는것처럼 보이게 구현하는것이 이번 코드의 핵심이다.

핸드폰 인증번호 로직을 구현할 때, 계속 요청을 할 수 없게 inputBox를 disable 시킨다면 불필요한 API 호출과 버그를 걱정하지 않아도 된다.

엄청난 사용자가 동시에 API 호출을 하지 않는 이상 바로 응답이 오지만 UX적으로 괜찮은 방법인 것 같다.

profile
Front-end Developer

1개의 댓글

comment-user-thumbnail
2021년 12월 30일

머태리얼 UI를 활용한 버튼 디자인 개선이군요! 큰 도움이 되었습니다 (_ _)

답글 달기