⚛️Start! React : section09 - 더미데이터, map()반복문

이번 수업 시간은 본격적인 실습을 하는 수업이다. 여기서 우리는 컴포넌트를 3개를 만들어야한다. 우선 App에서 랜더링이 되는 ClassApp.js파일을 살펴보자.(참고로 css파일은 index.js파일에 import해둔 상태이다. index.css와 data.js는 해당 강의의 강의 자료에서 살펴볼 수 있다.)

* ClassApp.js

 

import Day from "./component/Day";

import DayList from "./component/DayList";

import Header from "./component/Header";

function ClassApp() {

  return (

    <div className="App">

      <Header></Header>

      <DayList></DayList>

      <Day></Day>

    </div>

  );

}

export default ClassApp;

 

구성은 이렇게 되어 있다. Header컴포넌트는 별어려움이 없으니 간단하게 살펴보고 다른 컴포넌트들을 하나씩 살펴보자.

* 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">

        Day 추가

      </a>

    </div>

  </div>

}

* DayList.js

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

export default function DayList() {

  console.log(dummy)

  return (

    //Key는 반복되는 요소에 고유값을 넣어야해서 필요하다.

    <ul className="list_day">

      {dummy.days.map(day => {

        return (

          <li key={day.id}> Day {day.day} </li>

        )

      })}

      <li></li>

    </ul>

  );

}

데이터값을 가져오기 위해서 map함수를 사용했다. map함수를 사용해서 data의 day부분을 가지고 왔다. 주석에서 다루었듯이 반복되는 요소에는 key값을 항상 부여 해야한다. 그리고 수업에서는 day라는 매개변수를 하나만 사용하기 때문에 소괄호를 사용해 return을 생략하는 방법을 사용했지만 본인은 중괄호를 사용했다. 간단하게 표현되는 식은 금방 기억하지만 그렇지 못한 식은 기억에서 잘 잊어버리는 이유 때문이다. 따라 본인은 중괄호를 계속해서 사용할 것이다. 아래 코드는 소괄호를 사용한 방식이다.

  ...

return (

  <ul className="list_day">

    {dummy.days.map(day => (

      <li>

        Day {day.day}

      </li>

    ))}

  </ul>

);

  ...

 

* Day.js

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

export default function Day() {

  const day = 1;

  const wordList = dummy.words.filter(word => word.day === day); //1일차 dummy data를 가지고 온다.

  return <>

    <table>

      <tbody>

        {wordList.map(word => {

          return (

            <tr key={word.id}>

              <td>{word.eng}</td>

              <td>{word.kor}</td>

            </tr>

          )

        })}

      </tbody>

    </table>

  </>;

}

DayList에서도 사용했듯이 map함수를 사용했다. 다만 다른점은 wordList변수안에 filter를 사용해서 day 1일차 차만 보여 줄 수 있도록 작성 했다. day변수가 2,3일차로 변경되면 불러오는 data는 해당 data로 변경되는 것을 브라우저를 통해 확인 할 수 있다.

앞으로 우리는 DayList.js에서 보여지 듯 각 Day들을 버튼으로 변경하고 해당 Day들의 목록들이 보일 수 있도록 작성할 것이다. 그렇다면 우리는 DayList.js의 컴포넌트들을 어떻게하면 좋을지 고민해볼 필요가 있다. 개인적으로는 해당 컴포넌트 안에 있는 day를 useState로 사용해서 해당 버튼이 눌렸을 때 반응할 수 있도록 바꿀 것이다. 따라 각 버튼 컴포넌트에 프로퍼티 함수를 주고 props로 useState로 변동된 day값을 넘겨줄 수 있도록 작성할 것 같다. (가능하다면 다음 수업을 듣기 전에 이를 작성해보고 수업을 들으면 좋을 것 같다.)

수업을 들으면서 느낀 것은 프로젝트를 작성할 때의 노하우도 조금은 살펴 볼 수 있다고 생각한다. 먼저 바로 jsx의 문법으로 컴포넌트들을 동적으로 구현하기 보다 정적으로 작성을 하고 하나하나 맞춰서 동적인 컴포넌트들을 추가하는 방법으로 프로젝트를 진행한다는 것을 알 수 있다.