[React] Map() 반복문-더미데이터

API가 따로 없을때는 더미데이터를 만들어서 테스트하곤 한다.

1. src/db/data.json 파일 생성

{
    "days":[
        {"id":1, "day":1},
        {"id":2, "day":2},
        {"id":3, "day":3}
    ],

    "words":[

        {
            "id":1,
            "day":1,
            "eng":"book",
            "kor":"책",
            "isDone":false
        },
        {
            "id":2,
            "day":2,
            "eng":"car",
            "kor":"차",
            "isDone":false
        },
        {
            "id":3,
            "day":3,
            "eng":"pen",
            "kor":"펜",
            "isDone":false
        },
        {
            "id":4,
            "day":2,
            "eng":"school",
            "kor":"학교",
            "isDone":false
        },
        {
            "id":5,
            "day":3,
            "eng":"pencil",
            "kor":"연필",
            "isDone":false
        }

    ]

}

이런식으로 데이터 json이 담겨있는 파일을 생성한다.

2. 더미데이터를 사용할 js 파일 생성

/src/components/DayList.js

import dummy from '../db/data.json';

export default function DayList(){
    console.log(dummy);
    return(
        <div>
            <ul className="day">
                {dummy.days.map(day=>(
                    <li key={day.id}>Day {day.day}</li>
                ))}
            </ul>
        </div>
    )
}

이때 key 값을 꼭 줘야만 오류가 안난다.

map 함수에서 key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다. 따라서 안정적인 고유성을 부여하려면 key 값을 반드시 지정해줘야 한다 !

  datalist.map((list, index) =>
  <li key={index}></li>

보통 리스트에 key를 지정하지 않으면 ,React는 기본적으로 index를 key로 사용한다.만약 순서가 있는 경우에는 key에 인덱스를 사용하는 것은 권장하지 않는다!

그럼 요로코롬 day 값(1,2,3)만 나오게 된다!