[React] 리액트 컴포넌트 반복 (map을 이용한 코드 반복 렌더링)

🚀

최근에 리액트를 배우면서 리액트 개발에 관해 어느 정도 감은 익혔으나
컴포넌트를 렌더링 하면서 반복되는 코드들 때문에 코드 줄이 길어지고
이러한 문제를 반복문으로 해결할 수 없을까 고민하면서 방법을 찾아보게 되었습니다.

 

💡 문제 발생

<App.jsx>

import "./App.css";

function App() {
  return (
    <table>
      <thead>
        <tr>
          <th>품목</th>
          <th>가격</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>사과</td>
          <td>10000원</td>
        </tr>
        <tr>
          <td>딸기</td>
          <td>8000원</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;
}

👨🏻‍💻 결과

 

보통은 테이블을 생성할 때 데이터를 받아와서 해당 칸에 데이터를 집어넣기 때문에
예시로 샘플 데이터를 객체로 생성한 뒤 HTML 코드에서 '{obj.***}'으로 데이터를 넘겨주었습니다.

<App.jsx>

import "./App.css";

function App() {
  const obj = {
    header: ["품목", "가격"],
    data: [
      { fruit: "사과", price: "10000원" },
      { fruit: "딸기", price: "8000원" },
    ],
  };
  return (
    <table>
      <thead>
        <tr>
          <th>{obj.header[0]}</th>
          <th>{obj.header[0]}</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;

👨🏻‍💻 결과

그러나 만약에 테이블의 크기가 10x10 혹은 그 이상이라면...?
코드의 길이는 꽤나 길어질 것이고 비효율적일 것입니다.

 

 

🗝️ 해결법

Vue에서는 반복문으로 v-for을 사용하고 리액트에서는 반복문으로 map을 사용합니다.

<App.jsx>

import "./App.css";

function App() {
  const obj = {
    header: ["품목", "가격(원)", "수량(개)"],
    data: [
      { fruit: "사과", price: "10000원", ea: "5" },
      { fruit: "딸기", price: "8000원", ea: "25" },
      { fruit: "복숭아", price: "15000원", ea: "6" },
      { fruit: "바나나", price: "3000원", ea: "1" },
      { fruit: "메론", price: "30000원", ea: "1" },
      { fruit: "수박", price: "22000원", ea: "1" },
      { fruit: "참외", price: "4000원", ea: "2" },
      { fruit: "체리", price: "6000원", ea: "30" },
      { fruit: "포도", price: "7000원", ea: "3" },
      { fruit: "배", price: "4000원", ea: "1" },
    ],
  };
  return (
    <table>
      <thead>
        <tr>
          {obj.header.map((item) => {
            return <th>{item}</th>;
          })}
        </tr>
      </thead>
      <tbody>
        {obj.data.map((item) => {
          return (
            <tr>
              <td>{item.fruit}</td>
              <td>{item.price}</td>
              <td>{item.ea}</td>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
}

export default App;

👨🏻‍💻 결과

테이블뿐만 아니라 <ul></ul> 태그 내에 여러 개의 <li> 태그도 위와 같은 메커니즘으로 해결할 수 있고
다른 반복되는 HTML 코드들도 효율적으로 작성할 수 있습니다.

 

 

🔥 마치며

리액트 개발을 하면서 여러 개의 데이터들을 일일이 <td></td> 태그 내에서 {obj.data}로 집어넣으면서 "정말 비효율적이다"라고 느꼈었는데 map 함수를 사용하니 훨씬 가독성이 좋고 코드 길이도 간결하고 깔끔한 것 같습니다.