ReactJS: 모든 입력 필드에 대한 자동 저장 기능

저는 Javascript로 코딩하는 데 몇 년이 지난 후 최근에 ReactJS를 선택했습니다. ReactJS는 많은 부가 기능이 있는 강력하고 유용한 프레임워크이기 때문에 새로 배워야 할 것이 너무 많은 가운데 저는 그것이 단지 자바스크립트 프레임워크라는 사실을 잊었습니다. 네, 제 ReactJS 앱에서 바닐라 JS를 계속 사용할 수 있습니다! (이런)

다음은 한 가지 예입니다.

우리 팀은 텍스트 상자 입력에 대해 간단한 디바운스 자동 저장 기능을 구현하기를 원했습니다. 처음에 우리는 lodash의 디바운스를 사용하여 작동하도록 했습니다. 작동하는 것 같았고 우리는 그것을 시작했습니다. 그러나 고객들은 텍스트 상자에 타이핑하는 것이 불안해 보인다는 불만을 가지고 돌아왔습니다. 따라서 이전 코드는 다음과 같습니다.

import { debounce } from "lodash";
import RichText from "../controls/rich_text";

...

class TextQuestion extends React.Component {
  constructor(props) {
    super(props);
    this.update = debounce(this._update.bind(this), 500);
  }

  _update(text) {
    this.setState({ text });

    callAPIToSaveText({ answer: text });
  }

  ...

  render() {
    ...

    <RichText.NoToolbar editorClass="small" value={this.state.text} onChange={this.update} />
  }
}

이것은 작동하지 않을 때 작동합니다 :) e.g. 사용자가 문자 사이에 약 0.5초 간격으로 입력할 때. 앱은 텍스트를 저장하고 저장 후 입력한 내용을 삭제하면서 저장된 텍스트로 텍스트 상자를 다시 렌더링합니다.

버그를 수정하기 위해 다음과 같이 바닐라 JS의 setTimeout을 사용하기로 했습니다.

import RichText from "../controls/rich_text";

const SavingState = Object.freeze({
  NOT_SAVED: 0,
  SAVING: 1,
  SAVED: 2
});

class TextQuestion extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      text: "",
      saving: SavingState.NOT_SAVED
    };

    this.update = this.update.bind(this);
  }

  componentDidMount() {
    this.timer = null;
  }

  update(text) {
    clearTimeout(this.timer);
    this.setState({ text, saving: SavingState.NOT_SAVED });

    this.timer = setTimeout(() => {
      this.setState({ text, saving: SavingState.SAVING });

      // calls API
      callAPIToSaveText({ answer: text })
      .then(() => this.setState({ saving: SavingState.SAVED }));
    }, 500);
  }

  render() {
    <RichText.NoToolbar editorClass="small" value={this.state.text} onChange={this.update} />
    <AutoSaveDisplay saving={this.state.saving} />
  }
}

const AutoSaveDisplay = ({ saving }) => {
  let display;
  switch (saving) {
    case SavingState.SAVING:
      display = <em>saving...</em>;
      break;
    case SavingState.SAVED:
      display = (
        <>
          <Icon check /> <em>saved!</em>
        </>
      );
      break;
    default:
      display = <br />;
  }
  return <div className="auto-save-display">{display}</div>;
};
AutoSaveDisplay.propTypes = {
  saving: PropTypes.oneOf(Object.values(SavingState))
};

// styles I use for auto-save-display
// .auto-save-display {
//  display: block;
//  height: 25px;
//}

시작합니다. 이제 자동 저장이 작동합니다! 위에서 본 AutoSaveDisplay 구성 요소는 텍스트를 저장할 때 "saving..."및 "saved"를 표시하는 최고의 보너스 중 하나일 뿐입니다.