더미 데이터(Dummy data)와 map() 반복문

https://www.youtube.com/watch?v=89jyGFktI40&list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7-&index=9

더미 데이터(Dummy data) 사용해보기

내가 이해한 더미 데이터는 일종의 '가짜 데이터'다.

지금 듣는 강의에서 만들려하는건 영단어장이다.
영단어장에는 영어와 뜻이 있어야 하는데,
이러한 내용을 진짜 있는 데이터처럼 활용할 수 있도록 만든 임시 데이터가 필요하다.

src폴더 안에 db폴더를 만들고 data.json파일을 생성한뒤 파일에 데이터를 넣어준다.
코딩앙마님의 데이터는 아래와 같다.

{
  "days": [
    {
      "id": 1,
      "day": 1
    },
    {
      "id": 2,
      "day": 2
    },
    {
      "id": 3,
      "day": 3
    },
    {
      "day": 4,
      "id": 4
    }
  ],
  "words": [
    {
      "id": 1,
      "day": 1,
      "eng": "book",
      "kor": "책",
      "isDone": false
    },
    {
      "id": 3,
      "day": 2,
      "eng": "car",
      "kor": "자동차",
      "isDone": false
    },
    {
      "id": 5,
      "day": 3,
      "eng": "school",
      "kor": "학교",
      "isDone": false
    },
    {
      "id": 6,
      "day": 3,
      "eng": "pencil",
      "kor": "연필",
      "isDone": false
    },
    {
      "day": "3",
      "eng": "window",
      "kor": "창문",
      "isDone": false,
      "id": 7
    },
    {
      "day": "3",
      "eng": "house",
      "kor": "집",
      "isDone": false,
      "id": 8
    },
    {
      "day": "2",
      "eng": "mouse",
      "kor": "쥐",
      "isDone": false,
      "id": 9
    },
    {
      "day": "4",
      "eng": "monkey",
      "kor": "원숭이",
      "isDone": false,
      "id": 10
    },
    {
      "day": "4",
      "eng": "apple",
      "kor": "사과",
      "isDone": false,
      "id": 11
    },
    {
      "day": "3",
      "eng": "apple",
      "kor": "사과",
      "isDone": false,
      "id": 12
    }
  ]
}

map() 반복문 사용해보기

map 함수는 for문같은 반복문이며
배열을 받아서 또 다른 배열을 반환해준다.
이때 반환되는 요소는 JSX로 작성해주면 된다.

1) import 하기

dummy도 사용하고자 하는 컴포넌트에 import 해줘야한다!

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

export default function DayList() {  //DayList.js
  return (
  );
}

2) map 함수 작성

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

export default function DayList() {  //DayList.js
  //console.log(dummy);
  
  return (
    <ul className="list_day">
      {dummy.days.map((day) => (  //dummy 안의 days를 map함수로 돌릴거야!
        <li key={day.id}>Day {day.day}</li>  //key는 day.id, 클라이언트에 보여지는건 {day.day}
      ))}
      <li></li>
    </ul>
  );
}

다른 컴포넌트에서도 사용한 map 함수

여기서는 filter도 사용했다.

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

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