[React Native] 리액트 네이티브 배열과 JSX구문

배열에 여러 개의 JSX문을 담을 수 있습니다.

 

App.tsx

import React from 'react'
import {SafeAreaView, Text} from 'react-native'

export default function App(){
	const children = [
    	<Text> test_1 </Text>,
        <Text> test_2 </Text>,
        <Text> test_3  </Text>
	]
	return <SateAreaView> {children} </SafeAreaView>
}

 

 <SateAreaView> {children} </SafeAreaView> 을 보면

배열 변수에 담긴 JSX문은 반드시 부모 컴포넌트의 자식 컴포넌트 형태로 만들어야 합니다.

 

 

배열 JSX문을 만들 때 조심할 점

 

JSX문에서 여러개의 자식 컴포넌트가 있을 때는 반드시 XML작성 원칙을 준수해야 합니다.

XML 문법에서 부모 요소 없이는 여러 개의 XML 요소를 만들 수 없습니다.

JSX 역시 XML이므로 여러 개의 컴포넌트를 배열로 담은 children 변수가

부모 컴포넌트 없이 홀로 {children}  형태로 존재해서 안됩니다.

 

즉, 배열 children 변수에 담긴 JSX문은

반드시 SafeAreaView와 같은 부모 컴포넌트의 자식 컴포넌트 형태로 만들어야 합니다.

 

return children 이나 return {children} 과 같이 작성할 수 없습니다.

 

 

데이터 배열을 컴포넌트 배열로 만들기

 

앞 App.tsx의 코드를 업데이트하여

Array 클래스가 제공하는 map 메서드를 사용해 내용이 조금씩 다른 컴포넌트 배열을 만들어봅시다.

 

App.tsx

import React from 'react'
import {SafeAreaView, Text} from 'react-native'

export default function App(){
	const children = [1, 2, 3].map((i) => <Text> Test {i} </Text>)
    
    return <SafeAreaView> {children} </SafeAreaView>
}

 

그리고 위 코드를 더 발전시켜 내용이 조금씩 다른 100개의 Text 컴포넌트를 만들어 보겠습니다

import React from 'react'
import {SafeAreaView, Text} from 'react-native'

export default function App(){
	const children = new Array(100)
    		.fill(null)
    		.map((notUsed, index) => <Text> Test {index} </Text>)
    
    return <SafeAreaView> {children} </SafeAreaView>
}

 

Array는 자바스크립트가 기본으로 제공하는 클래스이고,

타입스크립트는 자바스크립트의 상위집합(superset)이므로 Array를 사용할 수 있습니다.

 

Array는 클래스이므로 new 연산자를 통해 인스턴스를 만들어야 합니다.

Array는 Array(아이템 개수) 형태로 아이템 개수 만큼 채워진 배열을 만듭니다.

const children = new Array(100)는 이런 내용을 구현하고,

 

여기서 new Array(아이템 개수)는 아이템 개수만큼 undefined로 채워진 배열을 만듭니다.

undefined 아이템이 있는 배열에는 map 메서드를 사용할 수 없지만

null로 채운 배열에는 map 메서드를 사용할 수 있습니다.

따라서 6행은 7행의 map 메서드를 사용하고자 undefined로 채운 배열을 null로 채운 배열로 바꿔줍니다.

이런 유형의 코드는 샘플 데이터가 필요할 때 사용합니다.

 

 

아마 'Each child in a list should have a unique "key"...'라는 경고 메시지가 보일 텐데

 

모든 리액트와 리액트 네이티브 컴포넌트는 key, childen, ref 등 3개의 속성을 기본으로 가집니다.

이 중 key 속성은 리액트 네이티브가 컴포넌트의 렌더링 속도를 최적화(optimization)하는 데 필요한 속성입니다.

 

위 경고 메시지는 "모든 자식 컴포넌트는 구분할 수 있는 키 값을 가져야 한다"는 뜻입니다.

 

이에 대한 이유와 해결 방법은 다음 포스팅에서 컴포넌트와 속성을 살펴보며 자세히 포스팅하겠습니다!

 

 

 

 

 

 

 다음 내용은 위 책을 참고하여 작성하였습니다:)