定数データ
定数データとは?
->不変データ(静的データ)
->バックエンド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で利用できます.
Reference
この問題について(定数データ), 我々は、より多くの情報をここで見つけました https://velog.io/@zlrz6706/상수데이터テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol