React JSX에서 반복하는 방법

React를 사용하면 구성 요소 내에 JavaScript 코드를 쉽게 작성할 수 있습니다. 이를 통해 모든 개발자가 일련의 항목 반복, 함수 생성 및 호출, 로컬 변수에 데이터 저장 등과 같은 React의 일반적인 프로그래밍 기술을 편안하게 처리할 수 있습니다.

JSX(Javascript Syntax Extension)는 요소 렌더링을 구조화할 수 있도록 하는 React 프레임워크에서 개발하고 대중화한 JavaScript 확장입니다. 기본적으로 React(UI 설명)에서 HTML 코드를 작성하기가 더 쉬워지고 유연성으로 인해 JSX는 수년 동안 Vue.js와 같은 다른 인기 있는 프레임워크에 채택되었습니다.

이 짧은 자습서에서는 다음 todos 배열을 사용하여 반응 JSX 요소 내부를 반복하는 방법을 살펴봅니다.

const todos = [
  { id: 1, text: "Learn React", status: "completed" },
  { id: 2, text: "Do something", status: "incomplete" },
  { id: 3, text: "Do something else", status: "incomplete" },
];

React JSX의 루프

ES6에 도입된 map() 함수는 JSX에서 루핑에 선호되는 유일한 방법입니다.

{
  todos.map((todo) => (
    <p key={todo.id}>
      {todo.text} - {todo.status}
    </p>
  ));
}

배열의 각 요소에 대해 텍스트 및 상태 필드를
키가 id 필드에 매핑되는 요소입니다. 이렇게 하면 다음 마크업 결과가 생성됩니다.

<p>Learn React - completed</p>
<p>Do something - incomplete</p>
<p>Do something else - incomplete</p>

키 속성 이해

사용 중인 프레임워크/린팅 도구에 따라 각각 고유한 키 값을 사용하지 않는 경우
요소를 사용하면 다음과 같은 경고가 표시될 수 있습니다.

Warning: Each child in a list should have a unique "key" prop

React 루프의 키는 어떤 항목이 변경, 추가 또는 제거되었는지 식별하는 데 도움이 되며 루프 내부의 부모 요소에 고유한 키를 제공하여 요소 또는 구성 요소에 안정적인 ID를 부여하는 것이 중요합니다.

todos 배열 예제에서와 같이 각 todo ID를 키로 지정할 수 있습니다.

{
  todos.map((todo) => (
    <div key={todo.id}>
      <p key={todo.text}>
        {todo.text} - {todo.status}
      </p>
    </div>
  ));
}

반복하려는 항목에 고유 ID와 같은 고유 요소가 없는 경우 각 반복 요소에 대해 map() 함수에서 반환된 인덱스를 대신 사용하는 것이 일반적인 규칙입니다. 도메인 모델 변경:

{
  todos.map((todo, index) => (
    <div key={index}>
      <p key={todo.text}>
        {todo.text} - {todo.status}
      </p>
    </div>
  ));
}

결론

컴포넌트 루프를 사용하여 데이터를 출력하고 조작하는 것은 React의 일반적인 개발 방법입니다. 이 가이드에 표시된 대로 HTML 요소를 동적 데이터와 함께 그룹화할 수 있습니다. 이는 일반적으로 DOM 쿼리가 없는 순수한 JavaScript 앱에서는 불가능합니다. 깨끗하고 효율적이며 읽기 쉬운 방식으로 항목 집합을 출력하려면 구성 요소 루프를 사용해야 합니다.