React에서 객체 배열 매핑

React 라이브러리의 많은 훌륭한 기능 중 하나는 매우 동적이며 특정 요소를 렌더링하지 않고 동적으로 렌더링할 수 있다는 것입니다.

종종 웹 개발자는 많은 양의 데이터를 가지고 화면에 표시하기를 원하며 일반적으로 개체 배열로 형식화됩니다. 이 기사에서는 React에서 객체 배열을 매핑하는 방법을 보여주고 이 작업에 대한 가능한 사용 사례에 대해 논의합니다.

map() 메서드를 사용하여 React에서 객체 배열 매핑

React 라이브러리는 JavaScript를 기반으로 하므로 map()과 같은 메서드를 사용하여 개체 배열을 검토할 수 있습니다. 외부 데이터는 종종 개체 배열로 저장됩니다. 따라서 React에서 웹 애플리케이션을 개발할 때 객체 배열을 매핑해야 하는 경우가 많습니다.

JavaScript에서 배열을 반복하는 방법에는 여러 가지가 있습니다. for 루프, forEach() 메서드 또는 while 루프를 사용할 수 있습니다.

모든 웹 개발자는 객체 배열을 검토하고 JSX 내에서 새로운 React 요소 또는 구성 요소를 생성할 수 있기 때문에 map()을 사용하는 것을 선호합니다.

JSX는 React 구성 요소의 레이아웃을 구축하기 위한 특수 HTML 유사 구문입니다. HTML 코드처럼 보이는 것 안에 JavaScript 표현식을 포함할 수 있습니다.

이를 통해 React 요소, 구성 요소 및 값을 동적으로 쉽게 생성할 수 있습니다. 배열을 반복하는 다른 방법은 JSX 내에서 지원되지 않으며 map()이 유일하게 지원되는 방법입니다.

React에서 객체 배열을 매핑하는 방법의 예를 살펴보겠습니다.

export default function App() {
  const arr = [
    { name: "Irakli", height: 180 },
    { name: "Chris", height: 190 },
    { name: "Michael", height: 176 },
    { name: "John", height: 182 },
    { name: "Todd", height: 198 },
    { name: "Jack", height: 178 }
  ];
  return (
    <div className="App">
      {arr.map((person) => (
        <div
          style={{
            border: "2px solid black",
            margin: "30px auto",
            width: "30%"
          }}
        >
          <p>name: {person.name}</p>
          <p>height: {person.height}</p>
        </div>
      ))}
    </div>
  );
}

이 예제 코드에는 간단한 개체 배열이 있습니다. 배열의 각 항목은 한 사람을 나타냅니다.

CodeSandbox의 라이브 데모를 확인하고 map() 메서드가 무엇을 렌더링하는지 확인할 수 있습니다.

JSX 내에서(return 문에서) .map() 메서드를 사용하여 배열의 모든 항목을 검토했습니다.

map() 메서드는 배열의 모든 항목에서 실행될 콜백 함수인 하나의 인수를 사용합니다. 콜백 함수는 배열의 모든 항목에 대해 하나의 인수를 사용합니다.

이 경우 메소드는 객체의 전체 배열을 거치며 배열의 각 항목은 person 인수로 사용됩니다. 보시다시피 person 인수의 name 및 height 속성을 사용하여 출력에서 두 개의 <p> 요소에 대한 값을 생성합니다.

JSX에서 JavaScript 표현식(map() 메서드 실행과 같은)을 작성하려면 중괄호로 묶어야 한다는 점을 잊지 마십시오.

궁극적으로 map() 메서드는 개체 배열을 React 요소(또는 구성 요소) 배열로 변환하는 새 배열을 출력합니다.