React 더미 데이터 생성, map() 반복

React 더미 데이터 생성, map() 반복

 

 

 

1. 더미 데이터 생성

먼저 레이아웃 만들어주자

너무 길어질 거 같으니까 css 코드까지 올리지는 않겠다.

 

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">
                    날짜 추가
                </a>
            </div>
        </div>
    );
}

 

화면

 

이제 데이터를 만들어보자.

 

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": "car",
      "kor": "자동차",
      "isDone": false
    },
    {
      "id": 3,
      "day": 2,
      "eng": "school",
      "kor": "학교",
      "isDone": false
    },
    {
      "id": 4,
      "day": 2,
      "eng": "pencil",
      "kor": "연필",
      "isDone": false
    },
    {
      "id": 5,
      "day": 3,
      "eng": "window",
      "kor": "창문",
      "isDone": false
    },
    {
      "id": 6,
      "day": 3,
      "eng": "hand",
      "kor": "손",
      "isDone": false
    }
  ]
}

 

DayList.js

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

데이터 확인을 위해 콘솔에 띄워주자

 

App.js

function App() {

    return (
        <div className="App">
            <Header></Header>
            <DayList></DayList>
        </div>
    );
}

 

결과

 

데이터가 잘 나온다.

이제 반복을 해보자

 

 

2. map() 반복

DayList.js

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

 

화면

화면을 보면 반복이 잘 되는 거 같은데 콘솔창에 오류가 나온다.

 

키가 필요하다는 건데, 반복되는 요소에는 고유한 키가 있어야 한다.

 

코드 수정

DayList.js

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

            )}
            <li></li>
        </ul>
    );
}

이러면 이제 경고문이 사라진다.

 

이제 각 날짜에 맞는 단어 리스트를 생성해주자

 

Day.js

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

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

 

위 코드를 보면 알겠지만, 지금 날짜를 직접 지정해주고 있는데 이건 나중에 동적으로 변경되게 바꿔야 한다.

근데 지금은 반복문 공부하는 부분이니까 그건 다음 부분에 넣겠다.