코드 랜더링과 map

데이터를 랜더링을 해보고
map을 써서 데이터를 효율적으로 작성해보자

---

일단 기초 테이블 생성

<App.jsx>

import "./App.css";

function App() {
  return (
    <table>
      <thead>
        <tr>
          <th>품목</th>
          <th>가격</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>사과</td>
          <td>1000원</td>
        </tr>
        <tr>
          <td>감귤</td>
          <td>2000원</td>
        </tr>
      </tbody>
    </table>
  );
}

export default App;

 

---

객체 생성, 랜더링 후의 코드

<App.jsx>

import './App.css';

function App() {
    const obj = {
      header: ["품종", "가격","수량(개)"],
      data: [
          {fruit: "사과", price: "1000원", ea: "5"},
          {fruit: "감귤", price: "2000원", ea: "3"}
      ]
    };

  return (
      <table>
          <thead>
            <tr>
                <th>{obj.header[0]}</th>
                <th>{obj.header[1]}</th>
            </tr>
          </thead>
          <tbody>
            <tr>
                <td>{obj.data[0].fruit}</td>
                <td>{obj.data[0].price}</td>
            </tr>
            <tr>
                <td>{obj.data[1].fruit}</td>
                <td>{obj.data[1].price}</td>
            </tr>
          </tbody>
      </table>
  );
}

export default App;

 

---

<App.css>

table {
  margin: 100px;
  border: 1px solid black;
  border-collapse: collapse;
}

th, td {
  border: 1px solid black;
}

 

---

결과

 

---

근데 저런 객체가 수백수만개가 된다면...?
그냥 생각만해도 아찔하다

그래서 map을 써서 넣어보자!

<App.jsx>

import './App.css';

function App() {
    const obj = {
      header: ["품종", "가격","수량(개)"],
      data: [
          {fruit: "사과", price: "1000원", ea: "5"},
          {fruit: "감귤", price: "2000원", ea: "3"},
          {fruit: "밀감", price: "1000원", ea: "1"},
          {fruit: "바나나", price: "1000원", ea: "7"},
          {fruit: "감", price: "1500원", ea: "5"},
          {fruit: "메론", price: "10000원", ea: "1"},
          {fruit: "포도", price: "5000원", ea: "5"},
          {fruit: "배", price: "2000원", ea: "2"}
      ]
    };

  return (
      <table>
          <thead>
            <tr>
                {obj.header.map((product) => {
                    return <th>{product}</th>
                })}
            </tr>
          </thead>
          <tbody>
                {obj.data.map((product) => {
                    return (
                        <tr>
                            <td>{product.fruit}</td>
                            <td>{product.price}</td>
                            <td>{product.ea}</td>
                        </tr>
                    );
                })}
          </tbody>
      </table>
  );
}

export default App;

 

---

결과

짜잔