logo

React JS의 루프 배열 | React Foreach 루프 예제

이 섹션에서는 배열을 사용하여 렌더링의 도달 기본 루프를 설명하겠습니다. 이를 위해 렌더링에서 반응 루프 배열 예제를 설명했습니다. 웹 애플리케이션을 구축하려면 일련의 데이터를 처리하는 지식을 갖는 것이 매우 중요합니다. 이 예에서는 루프를 사용하는 방법을 살펴보겠습니다. 반응 js . 주어진 예에서는 반응 js에서 for 루프를 사용할 것입니다. 이를 수행하려면 몇 가지 단계를 따라야 합니다.

이번 섹션에서는 React 앱을 사용하겠습니다. 반응에서 맵, foreach 루프 및 for 루프가 필요한 경우 다음 예제를 보고 루프 배열 n 반응 js의 사용을 배울 수 있습니다. 배열에서는 항상 for 루프와 foreach 루프가 필요합니다. 도달 범위 내에서 배열을 반복하려면 이를 수행하기 위한 지도가 필요합니다. 그래서 리액트 네이티브의 맵 예시를 설명하겠습니다. map() 메소드에 의해 새로운 배열이 생성됩니다. 호출 배열에서는 각 요소에 대해 함수를 호출한 결과를 제공합니다. 이를 통해 루핑 프로세스를 단순화할 수 있습니다. 맵을 사용할 때 forEach 함수와 for 루프를 사용할 필요가 없습니다. Map, forEach 루프, for 루프에는 많은 차이점이 있습니다. 기존 데이터를 덮어쓰는 대신 map 함수는 데이터를 사용하고 새 배열을 만듭니다. 지도 기능의 모든 기능과 단순성으로 인해 React 문서에서는 지도 기능을 사용하도록 강력히 권장합니다.

이 쉬운 개념을 설명하기 위해 React 앱에서 두 가지 예를 제공하겠습니다. 첫 번째 예시에서는 1차원 배열을 가지는 리액트 루프를 설명하겠습니다. 두 번째 예에서는 다차원 배열이 있는 루프를 설명합니다. 두 가지 예는 다음과 같습니다.

예시 1:

RC/App.js

 import React from &apos;react&apos;; function App() { const myArray = [&apos;Jack&apos;, &apos;Mary&apos;, &apos;John&apos;, &apos;Krish&apos;, &apos;Navin&apos;]; return ( <table class="table"> <tr> <th>ID</th> <th>Name</th> <th>Email</th> </tr> {students.map((student, index) =&gt; ( <tr> <td>{student.id}</td> <td>{student.name}</td> <td>{student.email}</td> </tr> ))} </table> ); } export default App; 

이 예제를 실행하면 다음 미리보기가 표시됩니다.

React JS의 루프 배열