React Native의 For 루프
MD Aminul Islam
2023년10월12일
루프는 모든 프로그래밍 언어 및 프레임워크에서 가장 많이 사용되고 공통적인 부분입니다. 때로는 동적으로 한 번에 여러 요소를 만들어야 합니다.
이를 위해 루프를 사용합니다. 하지만 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
를 사용하여 앱을 실행했습니다.
작가: MD Aminul Islam
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
- Native View onPress 반응
- React Native에 이미지 포함
- React Native에서 라이브러리 연결 해제
- React Native에서 앱 이름 변경
- React Native에서 요소 정렬
- React Native에서 이미지 너비를 백분율로 설정