리스트 렌더링(List Rendering)

• 배열의 데이터를 이용하여 여러 요소를 렌더링하는 방식
• JavaScript의 배열 메서드인 map, Filter 등을 이용

import './App.css';

function App() {
  const items = [
    {title: '바지', price: 10000},
    {title: '양말', price: 1000},
    {title: '티셔츠', price: 5000},
  ];

  return (
    <>
      <h1>리스트 렌더링</h1>
      <div className="container">
        {
          items.map((item, idx) => {
            return (
              <div className="item" key={idx}>
                <h3>{item.title}</h3>
                <p>{item.price}</p>
              </div>
            );
          })
        } 
      </div>
    </>
  );
}

export default App;

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.item {
  padding: 20px;
  border: 1px solid #000;
  border-radius: 10px;
  width: 80px;
  text-align: center;
}