리액트에서 리스트(List)란?

 

리스트(List)란?

리스트는 여러 개의 항목을 배열 형태로 관리하고, 이를 동적으로 렌더링할 때 사용된다.

배열은 자바스크립트의 변수나 객체를 하나의 변수로 묶어놓은 것을 말한다.

React에서는 map() 함수를 사용하여 배열의 각 항목을 JSX 요소로 변환하여 렌더링한다.

import React from "react";

function ItemList() {
  const items = ["Apple", "Banana", "Orange"]; // 배열

  return (
    <div>
      <h1>Fruit List</h1>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li> // 배열의 항목을 <li> 요소로 렌더링
        ))}
      </ul>
    </div>
  );
}

export default ItemList;

 

• items.map((item, index) => (...)) :
• map() 함수는 items배열의 각 항목을 순회하면서, 각 항목을 <li>요소로 변환한다.
• 각 항목에 대해 key를 추가해야 한다. 이를 통해 React가 항목들을 효율적으로 추적하고, 변경될 때 성능을 최적화한다.