React에서 객체 배열을 렌더링하는 방법은 무엇입니까?

React에서 객체 배열 렌더링

React에서 객체 배열의 데이터 목록을 표시하려면 기존 방식과 약간 다른 접근 방식이 필요합니다. HTML.

접근 방법 1: React 요소 배열 생성

React에서 객체 배열을 렌더링하는 한 가지 방법은 먼저 React 요소 배열을 생성하는 것입니다. 배열의 단일 항목을 나타냅니다. 예는 다음과 같습니다.

render() {
  const data = [{ name: "test1" }, { name: "test2" }];
  const listItems = data.map((d) => <li key={d.name}>{d.name}</li>);

  return (
    <div>
      {listItems}
    </div>
  );
}

이 접근 방식은 배열의 각 항목에 대해 새로운 React 요소를 생성하여 각 항목이 식별을 위한 고유 키를 갖도록 합니다.

접근 방식 2: 반환 시 인라인 맵 함수

대체 방법은 JSX 반환 문에 매핑 함수를 직접 포함하는 것입니다.

render() {
  const data = [{ name: "test1" }, { name: "test2" }];
  return (
    <div>
      {data.map((d, idx) => <li key={idx}>{d.name}</li>)}
    </div>
  );
}

이 접근 방식을 사용하면 별도의 배열을 생성할 필요가 없습니다. React 요소로 코드를 더욱 간결하게 만듭니다.

주요 속성

객체 목록을 렌더링할 때 각 React 요소에 고유한 키 속성을 할당하는 것이 중요합니다. 이를 통해 React는 데이터가 변경될 때 DOM의 특정 요소를 효율적으로 식별하고 업데이트할 수 있습니다.

위 내용은 React에서 객체 배열을 렌더링하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!