TIL.4) mock data_React

🚨 Caution 🚨

これらはwecodeで勉強してまとめたものです.
筆者が理解した部分に基づいて書いた文章で、実際の内容とは少し違うかもしれません.
この点に注意してください
コンテンツへのフィードバックに感謝します.

🙋 mockデータは何ですか?

mock:だまし
すなわち、mock dataとは虚偽のデータを指す.
F.Eは画面レイアウトを構成するだけではありません.
B.EのAPIを受信して実装された画面に適用することも重要である.
B.Eでは,データのAPIが実現されておらず,伝達できない場合がある.
この場合、データを待つ必要はありません.
私の予想通りに画面上でデータが実現されることを確認するために、
mockデータを利用する.

作成▼mock data

mockデータを作成するには2つの方法があります.
1つはmockデータを直接適用する素子に挿入することであり、
メソッドは、ファイルを個別に作成し、fetchを使用してロードします.

☝🏻 構成部品の直接適用

const testScore = [
  { "id": 1, "userName": "xx", "scoreMath": "A+", "scoreEng": "D" },
  { "id": 2, "userName": "yy", "scoreMath": "C+", "scoreEng": "B" },
  { "id": 3, "userName": "zz", "scoreMath": "B+", "scoreEng": "F" }
]

class Result extends React.Component {
  render() {
    return (
      <div className="Result">
        {testScore.map((el) => {
        <span>{el.userName}</span>
        <span>{el.scoreMath}</span>
        <span>{el.scoreEng}</span>
       }
      </div>
    )
  }
}

これによりmap関数を用いてデータのサイクル出力中にmock dataを生成することができる.
同じ構成部品に適用する場合、ファイルを個別に作成するよりも変更が早い場合があります.
データが多いと、可読性の面で効率が低下します.

✌🏻 個別のファイルを作成しfetchを使用する

.json

[
  { "id": 1, "userName": "xx", "scoreMath": "A+", "scoreEng": "D" },
  { "id": 2, "userName": "yy", "scoreMath": "C+", "scoreEng": "B" },
  { "id": 3, "userName": "zz", "scoreMath": "B+", "scoreEng": "F" }
]

まずmock dataをします.jsonファイルを作成しpublic/data/に入れます.

componentDidMount() {
    fetch('http://localhost:3000/data/commentData.json', {
      method: 'GET',
    })
      .then(res => res.json())
      .then(data => {
        this.setState({
          commentList: data,
        });
      });
  }

mock dataを適用したい構成部品に適用します.componentDidMount()宣言、fetch()httpリクエストを送信するAPIアドレスを作成します.
mockデータを受信する必要があるので、さっき作成したファイルがあるパスを書きます.

  render() {
  const {commentList} = this.state;
    return (
      <div className="Result">
        {testScore.map((data) => {
        return (
        <span>{this.state.userName}</span>
        <span>{this.state.scoreMath}</span>
        <span>{this.state.scoreEng}</span>
        )
       }
      </div>
    )
  }
}

render次の部分はmap関数を使用して値のコードを受信する.
ちゃんと入れておけばいいのに
実際にはまだ完全に整理されていませんが、今後のプロジェクトが進むにつれて、
mock dataをクリーンアップした後、その内容を変更します.
完璧になるまで勉強する

▼mock data整理

mock dataを使用するのは最終的にデータを交換する前に
これは私が書いたコードがよく書けているかどうかを確認する手段だと思います.
しかし、F.E開発者はデータのフォーマットを勝手に特定することはできません.
偽のデータでも、B.E開発者と会話する必要があります.
B.Eでは、転送するデータのフォーマットを予め定めておく.
したがって、mock dataを作成して使用することをお勧めします.
開発者はコードを書くだけではありません.
開発者間のコミュニケーションも重要です.

この内容に関する別の記事
Reactのライフサイクル:componentDidMount()の関連記事
バックエンドとインタラクティブなfetch:fetch()了解文章