[React] 더미데이터에 map과 반복문을 사용해보자

 

1. 더미데이터 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":"banana",
            "kor":"바나나",
            "isDone":false
        },
        {
            "id":5,
            "day":3,
            "eng":"pen",
            "kor":"펜",
            "isDone":false
        },        
        {
            "id":6,
            "day":3,
            "eng":"school",
            "kor":"학교",
            "isDone":false
        }
    ]
}

day 3일차와 1day 당 단어 2개씩 더미 데이터를 생성했다.

 

2. Header.js

import React from "react";

const 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>
    )
}

export default Header;

 

3. DayList.js

import React from "react";
import dummy from '../db/data.json';

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

export default DayList;

 

위 그림처럼 나오도록 ul과 li에 css를 작성했고

 

dummy의 days에 map을 사용하여 li값에 ket값을 넣고 내용을 반복해준다.

 

4. Day.js

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

const 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.key}>
                        <td>
                            {word.eng}
                        </td>
                        <td>
                            {word.kor}
                        </td>
                    </tr>
                ))}
            </tbody>
        </table>
    )
}

export default Day;

그리고 filter를 사용하여 day1의 내용만 뽑아온다.

 

5. App.js

import './App.css';
import Header from './component/Header';
import DayList from './component/DayList';
import Day from './component/Day';
import { BrowserRouter, Route, Swich } from 'react-router-dom';

// 함수형 컴포넌트
function App() {
  return (
    <div className="App">
      <Header/>
      <DayList/>
      <Day/>
    </div>
  );
}

export default App;

 

 

6. 결과

간단하게 map과 filter를 사용하여 day1의 값만 출력해보았다.

다음시간에는 react-router-dom을 사용하여 Day 1과 Day 2, Day 3을 누를 때 마다 페이지 전환하여

day1의 단어, day2의 단어, day3의 단어를 출력해보겠다.