React에서 객체를 통한 루프

이 튜토리얼은 forEach(), Object.keys & map() 메서드를 사용하여 React에서 객체를 반복하는 방법을 보여줍니다.

React에서 객체를 통해 반복

React에서는 배열에서 데이터를 가져와 구성 요소(또는 DOM 요소)를 생성하기 위해 종종 .map() 메서드를 사용합니다.

예를 들어 전자 상거래 상점을 운영하는 경우 각 개체에 하나의 제품에 대한 자세한 정보가 포함된 개체 배열이 있을 수 있습니다. 그런 다음 이 배열을 반복하여 각 제품에 대한 구성 요소를 생성합니다.

React에서 배열의 항목을 검토하여 구성 요소를 생성하는 것은 표준 작업입니다. 그러나 객체를 반복하는 것은 조금 더 복잡하고 추가 단계가 필요합니다.

방법을 알아볼까요?

Object.keys() 및 map()을 사용하여 React에서 객체를 반복 실행

먼저, 객체를 인수로 취하는 Object.keys() 메서드를 사용하여 Object 속성의 배열을 생성해야 합니다.

그런 다음 이 배열과 함께 .map() 메서드를 사용하고 각 속성에 대한 사용자 지정 구성 요소를 생성할 수 있습니다. 이 예를 살펴보겠습니다.

export default function App() {
  const person = {
    firstName: "Irakli",
    lastName: "Tchigladze",
    age: 24,
    occupation: "writer"
  };
  return (
    <div className="App">
      {Object.keys(person).map((key) => (
        <h1>{key + " - " + person[key]}</h1>
      ))}
    </div>
  );
}

여기에 사람을 설명하는 네 가지 속성이 있는 사람 개체가 있습니다. JSX 내에서 Object.keys() 메소드를 사용하여 모든 객체 속성 목록을 가져옵니다.

그런 다음 .map() 메서드를 사용하여 개체 속성과 해당 값을 표시하는 <h1> 요소의 새 배열을 반환합니다. 아래 출력을 참조하십시오.

출력:

firstName - Irakli
lastName - Tchigladze
age - 24
occupation - writer

forEach() 메서드를 사용하여 React에서 객체 반복

forEach() 메서드를 사용하여 객체의 속성을 성공적으로 반복할 수도 있습니다. 그러나 먼저 이 메서드의 동작을 이해하는 것이 중요합니다.

.map() 메서드처럼 수정된 항목으로 구성된 새 배열을 반환하지 않습니다. 대신 새 배열을 만들고 배열의 각 항목을 수정하고 push() 메서드를 사용하여 수정된 항목을 새 배열에 추가해야 합니다.

아래의 예를 살펴보겠습니다.

const modifiedArray = [];
  Object.keys(person).forEach(function (key) {
    modifiedArray.push(<h1>{key + " - " + person[key]}</h1>);
  });

그러면 다음과 같이 JSX 내에서 modifiedArray를 참조할 수 있습니다.

<div className="App">{modifiedArray}</div>