[React] JSX에서 배열은 어떻게 렌더링될까? - map() 메소드를 이용한 컴포넌트 렌더링

React에서 여러 개의 컴포넌트를 렌더링 할 때, map() 메소드를 이용합니다.

 

🐣 map() 메소드를 사용하면 새로운 배열을 반환하는데, JSX에서 배열이 어떻게 출력되는지 궁금해졌습니다.

 

import React from 'react';

export default function Map() {
  const products = ['상의', '하의', '모자'];
  const listItems = products.map((product) => <li>{product}</li>);
  console.log(products);
  console.log(listItems);

  return (
    <>
      <ul>{products}</ul>
      <ul>{listItems}</ul>
    </>
  );
}

 

 

먼저 console.log 결과를 보면, listItems는 배열이 맞습니다.

 

 

 

  const products = ['상의', '하의', '모자'];
  const listItems = products.map((product) => <li>{product}</li>);

 

HTML을 보면

1. products 배열안의 각 요소들이 반환된 것을 볼 수 있습니다.

2. <li> 태그로 감싼 listItems도 <ul> 태그 안에 잘 들어간 것을 확인할 수 있습니다.

 

 

 

 

🎉 JSX에서 배열은 각 요소들이 하나씩 반환되면서, 렌더링 된다는 결과를 확인할 수 있습니다.

 

export default function Map() {
  const products = ['상의', '하의', '모자'];

  return (
    <>
      <ul>
        {products.map((product) => (
          <ProductName key={product} product={product} />
        ))}
      </ul>
    </>
  );
}