#9. 더미 데이터 구현, map() 반복문

본격적인 페이지 만들어보자.

헤더 만들기

Header.js

export default function Header() {
  return <div className="header">
    <h1>
      <a>토익 영단어(고급)</a>
    </h1>
    <div className="menu">
      <a href="#x" className="link">
        단어 추가
      </a>
      <a href="#x" className="link">
        Day 추가
      </a>
    </div>
  </div>;
}

App.js

import Header from './component/Header';

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

export default App;

더미 데이터 만들기

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

데이 리스트 만들기

map(): 배열 받아서 새로운 배열 반환해줌, 이때 반환되는 요소를 jsx로 작성해주면 됨

DayList.js

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

참고: 리액트에서 왜 key가 필요할까?

https://www.youtube.com/watch?v=ghxHAy3LH28

Day.js

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

export default function Day() {
  // dummy.words 사용

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

App.js

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

→ 모든 단어가 다 나와버림.

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>
    </>
  );
}

→ filter 사용해서 해당 날짜 단어만 출력하도록 만들었음.

→ 우리는 날짜를 클릭했을때 해당 날짜의 단어들만 나오게 하고싶다!
→ 리액트 router 설치해 페이지 이동, 라우팅 구현!