[React native] JSX 알아보기

 

JSX ?

JSX는 JavsScrpt XML를 줄인말로 JavsScript와 XML의 구문을 합친 코드를 말해요. 

JSX 구문을 바벨 플로그인을 통해 여러 개의 React.createElement 함수를 호출하여 평범한 자바스크립트로 변환해요.

좀더 쉽게 알아보기 위해 예제로 알아봅시다.

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

export default function App() {
	return (
    	<SafeAreaView>
			<div>Hello, React native!</div>
    	</SafeAreaView>
	)
}

위와 같이 html태그를 사용하는 방법과 아래와 같이 JSX를 사용하는 방법이 있어요

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

export default function App() {
	return (
    	<SafeAreaView>
			React.createElement("div", null, "Hello, React native!");
    	</SafeAreaView>
	)
}

JSX를 사용할때 주의해야할점은 반드시 부모요소가 있어야 해요.

그럼 조금더 예제를 볼까요

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

export default function App() {
  const isLoading = true
  if (isLoading) {
    return (
      <SafeAreaView>
        <Text>Loading...</Text>
      </SafeAreaView>
    )
  }

위 예제를 보면 if조건문이 return 밖에 선언 되어있는것을 볼수 있는데 return 안에는 if문을 사용할수가 없기 때문이에요.

결과 화면은 아래와 같이 나오네요

 

계속해서 예제를 보도록 하겠습니다.

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

export default function App() {
  const isLoading = false
  return (
    <SafeAreaView>
      {isLoading && <Text>Loading...</Text>}
      {!isLoading && <Text>Hello JSX world!</Text>}
    </SafeAreaView>
  )
}

위 소스를 보면 조건을 {}안에 넣어 선언해줄수 있어요.

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

export default function App() {
  const isLoading = true
  const children = isLoading ? (
    <Text>Loading...</Text>
  ) : (
    <Text>Hello JSX world!</Text>
  )
  return <SafeAreaView>{children}</SafeAreaView>
}

children에 다항조건문을 사용하여, 변수에 담아두고 return 안에 변수명을 써서 결과를 가져올수도 있구요.

다음 예제는 변수에 여러 요소들을 넣어놓고 불러오는 예제에요.

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

export default function App() {
  const children = [
    <Text>Hello world!</Text>,
    <Text>Hello world!</Text>,
    <Text>Hello world!</Text>
  ]
  return <SafeAreaView>{children}</SafeAreaView>
}

계속해서 다음 예제를 볼까요. 이번 예제는 children에 100개의 요소를 생성하여 결과를 보여주는 예제입니다.

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>Hello world! {index}</Text>)
  return <SafeAreaView>{children}</SafeAreaView>
}

 

지금까지 예제들을 봤는데요, 이런식으로 여러방법으로 표현을 해줄수 있고, 사용법도 제법 간단한 편에 속하네요. 앞으로도 계속 배워 나가며 글을 작성해 나가겠습니다.