HOWTO · React Native
React Native의 For 루프
이 튜토리얼에서는 React Native의 for 루프에 대해 설명합니다.
이 페이지의 내용
루프는 모든 프로그래밍 언어 및 프레임워크에서 가장 많이 사용되고 공통적인 부분입니다. 때로는 동적으로 한 번에 여러 요소를 만들어야 합니다.
이를 위해 루프를 사용합니다. 하지만 React-Native에서는 다른 프로그래밍 언어보다 조금 더 어렵습니다.
이 기사에서는 React-Native에서 for 루프를 사용하는 방법을 보여줍니다.
React Native에서 for 루프 사용
React 앱에서 for 루프를 사용하려면 아래 단계를 따라야 합니다.
- 먼저 배열 개체를 만들어야 합니다.
- 그런 다음
for루프를 실행하고 생성한 배열 내부의 요소를 푸시해야 합니다. - 해당 배열을
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를 사용하여 앱을 실행했습니다.
