React JS #9 더미 데이터 구현, map() 반복문 - 초보자를 위한 리액트 강좌

db 폴더의 data.json에 다음과 같은 data를 넣는다.

{
    "days": [
        {"id":1, "day":1},
        {"id":2, "day":2},
        {"id":3, "day":3}
    ],
    "words": [
        {
            "id":5,
            "day":3,
            "eng":"school",
            "kor":"학교",
            "isDone":false
        },
        {
            "id":6,
            "day":3,
            "eng":"pencil",
            "kor":"연필",
            "isDone":false
        },
        {
            "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
        }
    ]
}

component 폴더의 DayList.js에 다음과 같이 작성한다.
map() 반복문을 쓴다.

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

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

그리고 App.js에 다음과 같이 추가해준다.

<DayList></DayList>

그럼 브라우저에 다음과 같은 게 나온다.

component 폴더의 Day.js에 다음과 같이 작성한다.
map() 반복문을 쓴다.

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

export default function Day() {
    // dummy.words
    const day = 3;
    const wordList = dummy.words.filter(word => (
        word.day === day
    ))
    // 위 코드는 dummy 객체에 있는 words 배열을 filter() 메서드를 사용하여 새로운 배열 wordList를 만드는 코드입니다.

    // filter() 메서드는 배열의 모든 요소에 대해 주어진 함수를 호출하여 그 결과값이 true인 요소들만을 모아서 새로운 배열을 만듭니다.

    // 위 코드에서는 wordList 배열에는 day 프로퍼티가 3인 word 객체들만 모아서 넣습니다. filter() 메서드의 인자로 전달된 함수는 word 객체를 입력으로 받고, word.day가 1인 경우에만 true를 반환합니다.

    // 즉, wordList 배열에는 dummy.words 배열 중에서 day가 3인 객체들만 저장되게 됩니다.
    console.log(wordList)

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

그 다음 App.js에 다음과 같이 추가해준다.

<Day></Day>

그럼 브라우저에 다음과 같이 나온다.