로딩 스피너 컴포넌트 고찰

로딩 스피너 컴포넌트를 만들 때 고려할 점, 가능한 방법을 생각해 보았다.

이중 제출 방지

submit 버튼을 두 번 눌러 요청을 중복하는 걸 방지해야 한다.

div를 늘려 오버레이하는 게 가장 간단해 보인다.

더 철저하게 하자면 axios 사용 층에서 배타적으로 요청하는 유틸리티를 추가할 수 있을 듯하다.

서버도 결국엔 CSRF 토큰을 사용하게 될 텐데 이것도 이중 제출 문제를 완화할 수 있을 것으로 보임.

재활용 방법 비교

MobX

현재 사용 중이고 간단함

단점을 들자면 라이브러리 의존성

@inject('applicationStore')
@observer
class SubmitForm extends React.Component {
  showLoading() {
    this.props.applicationStore.showLoader = true;
  }
  render() {
    return <div />;
  }
}

컨텍스트

PureComponent로 만들 수 있다는 장점

하지만 일관성이 떨어짐(MobX에서 상태를 한눈에 알기 힘듦)

class SubmitForm extends React.PureComponent {
  render() {
    return (<React.Fragment>
      <Loader.Consumer>
        {showLoader => this.state.loading && showLoader(true)}
      </Loader.Consumer>
    </React.Fragment>);
  }
}

HOC

컨텍스트보다 덜 번잡함

props 이름이 충돌할 수 있고 조립한 컴포넌트 이름 고민 필요

class SubmitForm extends React.PureComponent {
  submitData() {
    this.props.showLoader(true);
    await request();
  }
  render() {
    return <div />;
  }
}
const Submit = withLoader(SubmitForm);
export { Submit as SubmitForm };

Hooks

리액트의 새로운 바람(...)

클래스에서 못 씀.

function SubmitForm() {
  const showLoader = useLoader();
  const onSubmit = useCallback(() => {
    showLoader(true);
  }, [showLoader]);
  return (<div>
    <button onClick={onSubmit}>load</button>
  </div>);
}