[React] 반복문 map

• 카드의 인수를 반복합니다.

1. 데이터 설정

{
  "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
    }
  )
}

2. 지도로 반복

• 맵 인수 부분에 화살표 함수를 작성하십시오.

export default function Day() {

    return (
        <>
            <table>
                <tbody>
                    {dummy.words.map(word => (
                            <tr key={word.id}>
                                <td>{word.eng}</td>
                                <td>{word.kor}</td>
                            </tr>
                        )
                    )}
                </tbody>
            </table>
        </>
    );
}

• 원하는 키만 나오도록 필터 기능을 통해 조절할 수 있습니다.

export default function Day() {
    const day = 1;
    const wordList = dummy.words.filter(word => (
        word.day === day
    ))

    return (
        <>
            <table>
                <tbody>
                    {wordList.map(word => (
                            <tr key={word.id}>
                                <td>{word.eng}</td>
                                <td>{word.kor}</td>
                            </tr>
                        )
                    )}
                </tbody>
            </table>
        </>
    );
}