定数データ


定数データとは?


->不変データ(静的データ)
->バックエンドAPIインポートを必要としない静的データを作成するためのUIの効率的な構成

定数データの使用方法


  • 重複するUIをハードコーディングとして作成すると、
    コードが長くなったので、読みやすさがよくありません.
    2.修正が必要な場合、対応する部分を見つけるのが難しく、メンテナンスが難しい.
    ->したがって、変更が必要な場合は、定数データの対応する部分の内容を変更するだけで簡単にメンテナンスできます.

    定数データを大文字+小文字-上付きコード会議としてマーク


    const INFO_DATA = [];

  • その後、重複した部分をフレームにして、変更したデータだけを入れます.

  • 同じフレーム内で変更された値だけがオブジェクトに挿入されます.

  • id値を入力する必要がありますが、mapメソッドを使用する場合、その配列内部の各データに固定された、異なる、唯一のkeypropsを付与するには、idを提供する必要があります.
    const INFO_DATA = [
    {id:0,link:"https://naver.com/",text:"안녕" },
    {id:1,link:"https://naver.com/",text:"잘가" },
    {id:2,link:"https://naver.com/",text:"고마워" },
    {id:3,link:"https://naver.com/",text:"최고" },
    {id:4,link:"https://naver.com/",text:"즐거워" },
    {id:5,link:"https://naver.com/",text:"사랑해" },
    ]
    <ul>
    INFO_DATA.map(el => {
    return (
    <li key={el.id} className="ex">
       <a href={el.link}>{el.text}</a>
    </li>
    )
    })
    </ul>
    
  • 定数データは、ファイルを個別に作成してアーカイブできます。

  • ファイルを作成し、デフォルトでエクスポートします.
  • で使用されている場所に輸入して使用することができます.
  • 定数データを1つのファイルから削除して別のファイルを管理する理由

  • 毒性とメンテナンスが容易
  • データの回収に使用可能
    ->他のファイルで同じデータを使用可能
    ->APIアドレスなどを設定します.jsファイルを作成した後、定数データとしてAPIアドレスを作成し、各ファイルに
    IMPORTで利用できます.