기본 Foreach 루프 반응

  2. 어떻게
  3. React 방법
  4. 기본 Foreach 루프 반응
Shubham Vora 2024년2월15일
React Native React Native Loop
  1. map() 메서드를 사용하여 React-Native에서 배열을 통해 반복
  2. map() 메서드를 사용하여 객체 배열을 반복합니다.
  3. 결론
기본 Foreach 루프 반응

때로는 개발자가 React-native로 작업하는 동안 배열과 같은 개체를 반복하고 작은 구성 요소를 만들어야 합니다. 바닐라 JavaScript에서는 foreach 루프를 사용하여 각 배열 요소를 반복할 수 있지만 React는 이를 지원하지 않습니다.

이 기사에서 배울 React의 배열 요소를 통해 반복하는 몇 가지 다른 방법이 있습니다.

map() 메서드를 사용하여 React-Native에서 배열을 통해 반복

React-native에서 배열의 map() 메서드는 foreach 메서드와 동일하게 작동합니다. 모든 요소를 반복하며 사용자는 모든 배열 요소에 대해 일부 작업을 수행할 수 있습니다.

아래 예에서는 사용자를 위한 환영 메시지가 포함된 배열 이름 message를 생성했습니다. map을 사용하여 배열을 반복하고 Text 구성 요소를 사용하여 배열의 모든 요소를 렌더링합니다.

예제 코드:

import { StyleSheet, Text, View } from "react-native";
export default function App() {
  const message = ["Welcome", "To", "DelftStack", "!"];
  return (
    <View>
      <Text style={{ fontSize: 30 }}>
        Displaying the Welcome Message Using the Map
      </Text>{" "}
      {/* Display all array elements in a single row */}
      <View style={{ flexDirection: "row", }}>
      {message.map((post) => {
        return <Text style={{ fontSize: 20 }}>{post} </Text>;
      })}
      </View>
    </View>
  );
}

출력:

map() 메서드를 사용하여 React-Native에서 배열을 반복

위 출력에서 사용자는 모든 요소가 단일 행에 표시되는 것을 볼 수 있습니다. 개발자가 map() 메서드를 사용하지 않으면 모든 메시지 요소에 대해 텍스트 구성 요소를 만들어야 하므로 코드가 명확하지 않습니다.

map() 메서드를 사용하여 객체 배열을 반복합니다.

이제 배열의 map() 메서드를 실시간으로 사용하는 방법을 알아봅니다. 개발자가 데이터베이스에서 책 데이터를 가져와서 책과 저자를 한 줄씩 표시해야 하는 애플리케이션을 개발하고 있다고 가정합니다.

여기서 우리는 책 데이터를 가져오는 것이 아니라 책의 저자와 제목을 포함하는 객체 배열을 만들었습니다. 그런 다음 책 세부 정보가 포함된 Text 구성 요소를 반환하는 books 배열을 참조하여 map() 메서드를 사용합니다.

예제 코드:

import { StyleSheet, Text, View } from "react-native";
export default function App() {
  const books = [
    {
      author: "jack",
      Title: "Book 1",
    },
    {
      author: "mack",
      Title: "Book 2",
    },
    {
      author: "Shubham",
      Title: "Book 3",
    },
    {
      author: "jem",
      Title: "Book 4",
    },
  ];
  return (
    <View>
      <Text style={{ fontSize: 30 }}>
        Showing the Book Title and its author name
      </Text>{" "}
      {/* Display all array elements one by one */}
      <View>
        {books.map((book) => {
          return <Text style={{ fontSize: 20 }}>{book.Title} by {book.author}</Text>;
        })}
      </View>
    </View>
  );
}

출력:

map() 메서드를 사용하여 객체 배열을 반복

결론

이 기사에서 독자는 React Native의 요소 배열을 반복하는 방법을 배웠습니다. 사용자가 return 부분 내부의 배열을 반복하려면 map() 메소드를 사용하십시오.

그렇지 않으면 사용자는 foreach 방법을 사용할 수 있습니다.

작가: Shubham Vora
Shubham Vora avatar Shubham Vora avatar

Shubham is a software developer interested in learning and writing about various technologies. He loves to help people by sharing vast knowledge about modern technologies via different platforms such as the DelftStack.com website.

LinkedIn GitHub

관련 문장 - React Native

관련 문장 - React Native Loop