[ReactJS] dummy 데이터, map() 반복문

React 에서 dummy 데이터 는 주로 테스트 목적이나 UI 구성 예시를 위해 만들어낸 임의의 데이터이다. 즉, API 에서 실제 데이터를 불러오기 전에 UI 가 어떻게 보여질지 확인해보거나, 컴포넌트가 어떻게 작동하는지 시뮬레이션을 돌려보는 것이다.

더불어, dummy 데이터 를 만들어놓은 json 파일에서 데이터를 가져와 map() 반복문을 통해 목록을 생성할 것이다.

---

단어장을 예시로 해보자.
단어장의id, 회차 day, 영문 eng, 번역kor, 확인여부isDone 로 나누었으며 형식은 아래와 같다.

형식
객체 배열 형태로 자주 사용된다.

//data.json

{
  "days": [
    { "id": 1, "day": 1 },
    { "id": 2, "day": 2 },
    { "id": 3, "day": 3 }
  ],
  "words": [
    {
      "id": 1,
      "day": 1,
      "eng": "book",
      "kor": "책",
      "isDone": true
    },
    {
      "id": 2,
      "day": 1,
      "eng": "apple",
      "kor": "사과",
      "isDone": false
    },
    {
      "id": 3,
      "day": 2,
      "eng": "car",
      "kor": "차",
      "isDone": false
    },
  ]
}

이제 해당 데이터를 DayList.js 파일에 불러오고 이를 반복시킬 것이다.

---

전체코드

import dummy from "../db/data.json";
import styles from "../Hyunmer.module.css";
import { Link } from "react-router-dom";

const DayList = () => {
  return (
    <div className={styles.daylist}>
      <h2>Class Day</h2>
      <ul>
        {dummy.days.map((day) => (
          <li key={day.id}>
            <Link to={`/hyunmer/hyunmer5/day/${day.day}`}> Day {day.day} </Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default DayList;

map() 이 들어간 부분을 보자.

map()은 배열을 받아서 또 다른 배열을 반환해준다.
그러니까, 배열을 순회하면서 각 요소에 대해 콜백 함수를 실행, 콜백 함수의 반환값으로 이루어진 새 배열을 만든다. 원본의 배열은 변하지 않는 동시에 늘 새로운 배열이 반환된다는 게 주요 특징.

<ul>
  {dummy.days.map((day) => (
    <li key={day.id}>
      <Link to={`/hyunmer/hyunmer5/day/${day.day}`}> Day {day.day} </Link>
    </li>
  ))}
</ul>

코드설명

1. 배열 반복: dummy.days 라는 배열을 map() 함수를 사용하여 각 요소를 반복. map() 은 각 요소에 대한 함수를 호출하고, 결과로 새로운 배열을 반환한다.

2. key 값: map() 을 렌더링 할 때, 이 key 라는 건 중요하다고 한다. React 가 리스트를 업데이트 할때마다 이 고유한 key 값을 사용해 항목을 구분하고 있다. 해당 key 는 위의 코드에선 {day.id} 로 사용 중이다.

3. Link 컴포넌트: 클릭을 했을때 생성된 URL 로 이동한다. 가령, day.day 값이 1 일 경우, URL 은 /hyunmer/hyunmer5/day/1 로 이동될 것이다.

---

다음에는 CRUD 에 대해 글을 작성할 거 같다.
늘 마무리 짓는 문장을 뭘로 해야할지 고민이다...