React Native의 For 루프

MD Aminul Islam 2023년10월12일
React Native의 For 루프

루프는 모든 프로그래밍 언어 및 프레임워크에서 가장 많이 사용되고 공통적인 부분입니다. 때로는 동적으로 한 번에 여러 요소를 만들어야 합니다.

이를 위해 루프를 사용합니다. 하지만 React-Native에서는 다른 프로그래밍 언어보다 조금 더 어렵습니다.

이 기사에서는 React-Native에서 for 루프를 사용하는 방법을 보여줍니다.

React Native에서 for 루프 사용

React 앱에서 for 루프를 사용하려면 아래 단계를 따라야 합니다.

  1. 먼저 배열 개체를 만들어야 합니다.
  2. 그런 다음 for 루프를 실행하고 생성한 배열 내부의 요소를 푸시해야 합니다.
  3. 해당 배열을 return() 함수에 전달해야 합니다.

React-Native에서 for 루프의 사용을 설명한 아래 예제를 살펴보겠습니다.

// importing necessary packages

import {StatusBar} from 'expo-status-bar';
import {StyleSheet, Text, View} from 'react-native';

export default function App() {
  let myLoop = [];  // Declaring an array

  for (let a = 0; a <= 5; a++) {  // For loop here
     myLoop.push(
       <Text>This is line {a} {'\n'}</Text>
     );
  }


  return ( // Showing the array element
    <View style={styles.container}>
      <Text>{myLoop}</Text>
      <StatusBar style="auto" />
    </View>
  );

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

단계와 관련하여 필요한 모든 줄의 목적은 위 코드에서 주석으로 남습니다. 이제 앱을 실행하면 화면에 아래와 같은 출력이 표시됩니다.

This is line 0
This is line 1
This is line 2
This is line 3
This is line 4
This is line 5

위에서 공유한 코드는 React-Native에서 생성되었으며 Expo-CLI를 사용하여 앱을 실행했습니다.

MD Aminul Islam avatar MD Aminul Islam avatar

Aminul Is an Expert Technical Writer and Full-Stack Developer. He has hands-on working experience on numerous Developer Platforms and SAAS startups. He is highly skilled in numerous Programming languages and Frameworks. He can write professional technical articles like Reviews, Programming, Documentation, SOP, User manual, Whitepaper, etc.

LinkedIn

관련 문장 - React Native

관련 문장 - React Native Loop