📖[React]더미 데이터 구현, map()반복문

📃 Header.js

export default function Header() {
  return (
    <div className="header">
      <h1>
        <a href="/">토익 영단어(고급)</a>
      </h1>
      <div className="menu">
        <a href="#x" className="link">
          단어 추가
        </a>
        <a href="#x" className="link">
          Day 추가
        </a>
      </div>
    </div>
  );
}

📃 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": 1,
      "eng": "apple",
      "kor": "사과",
      "isDone": false
    },
    {
      "id": 3,
      "day": 2,
      "eng": "car",
      "kor": "자동차",
      "isDone": false
    },
    {
      "id": 4,
      "day": 2,
      "eng": "pen",
      "kor": "펜",
      "isDone": false
    },
    {
      "id": 5,
      "day": 3,
      "eng": "school",
      "kor": "학교",
      "isDone": false
    },
    {
      "id": 6,
      "day": 3,
      "eng": "pencil",
      "kor": "연필",
      "isDone": false
    }
  ]
}

📃 DayList.js

import dummy from "../db/data.json"; //dummy data 생성

export default function DayList() {
  console.log(dummy);
  return <></>;
}

✔️ map: 배열을 받아서 또 다른 배열로 반환

반환되는 배열의 요소는 jsx로 작성

📃 DayList.js

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

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

1. dummy의 days 리스트를 map으로 적용
2. map은 props를 day로 받음
3. dummy days를 day로 받고
4. 그 day들의 id를 key(days 의 id->day의 id),
5. day의 day를 <li>Day {day.day} </li> 로 변경

Day 1일차 단어 출력

📃 Day.js

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

export default function Day() {
  //dummy.words 사용
  const day = 1;
  const wordList = dummy.words.filter((word) => word.day === 1); //필터를 걸어줌
  console.log(wordList);
  return (
    <>
      <table>
        <tbody>
          {wordList.map((word) => (
            <tr key={word.id}>
              <td>{word.eng}</td>
              <td>{word.kor}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </>
  );
}

결과물

문제, Day1을 클릭하면 Day1의 단어가 Day2를 클릭하면 Day2의 단어가 나와야함... >>React Router로 해결!