[React Native] 2-3 JSX 문법

[리액트 네이티브를 다루는 기술] 을 공부하며 작성하는 블로그 글입니다.

---

마치 HTML 코드처럼 쓰이고 있는 <> 괄호로 감싸져 있는 문법들을 이야기합니다.

 

<Text>로 열렸으면 반드시 </Text>로 닫혀야 하며 닫히지 않으면 오류가 납니다.

 

또한 <Text />와 같이 스스로 닫는 태그도 사용할 수 있고

 

가장 주의할 점은 컴포넌트에서 JSX를 반환할 때에는 반드시 하나의 태그로 묶여있어야합니다.

import React from 'react';
import {View, Text} from 'react-native';

function Greeting(props) {
  return (
    <View>
      <Text>안녕하세요 {props.name}!!</Text>
    </View>
  );
}

Greeting.defaultProps = {
  name: '리액트 네이티브',
};

export default Greeting;

위 코드에선 <View>태그로 묶여있는 것 처럼 말입니다.

 

만약 <View> 태그 밖에 <Text>로 묶인 코드가 있다면 오류가 발생하게 됩니다.

 

<View> 태그 안에 또 하나의 <View> 태그 역시 만들 수 있습니다.

import React from 'react';
import {View, Text} from 'react-native';

function Greeting(props) {
  return (
    <View>
      <Text>안녕하세요 {props.name}!!</Text>
      <View>
        <Text>여분의 뷰</Text>
      </View>
    </View>
  );
}

Greeting.defaultProps = {
  name: '리액트 네이티브',
};

export default Greeting;

---

JSX 안에서 자바스크립트 표현식을 보여주려면 앞서 props에서 사용해 본 것처럼 

 

{}로 감싸주어야합니다.

      <Text>안녕하세요 {props.name}!!</Text>

App 컴포넌트에서도 사용하는 예시는 이렇습니다

import React from 'react';
import {SafeAreaView, Text, View} from 'react-native';
import Greeting from './components/Greeting';

const App = () => {
  
  const name = 'Myname'
  
  return (
    <SafeAreaView>
      <Greeting name={name} />
    </SafeAreaView>
  );
};

export default App;

먼저 선언을 하고 {}안에 넣어서 사용할 수 있습니다