리액트 네이티브 React Native | JSX와 XML 마크업 언어

 

⭕ 리액트 네이티브 React Native | JSX와 XML 마크업 언어

리액트 네이티브(React Native)는 모바일 애플리케이션을 개발하기 위한 프레임워크로, XML 마크업 언어를 사용합니다. XML은 HTML의 부분집합으로, 태그나 속성을 자유롭게 확장할 수 있어 HTML보다 유연한 구조를 가집니다.

 

➡️ JSX

JSX는 리액트 네이티브에서 사용되는 문법으로, JavaScript XML의 약자입니다. JSX는 JavaScript로 XML 형식의 코드를 작성할 수 있게 해줍니다. HTML과 달리 XML은 태그 이름을 자유롭게 정의할 수 있습니다

 

➡️ 마크업 언어 문법

마크업 언어의 기본 문법은 시작 태그와 끝 태그로 이루어집니다. 시작 태그는 <tag> 형식으로 작성하고, 속성을 가질 수 있습니다. 

---

속성은 항상 따옴표로 감싸야 합니다. 시작 태그와 끝 태그 사이에는 자식 요소를 넣을 수 있습니다. 

---

자식 요소는 XML 요소나 문자열을 의미합니다. 만약 문자열이 자식 요소라면 따옴표를 생략할 수 있습니다. 또한, 자식 요소가 없는 경우에는 시작 태그를 스스로 닫을 수 있습니다.

---

import React from 'react'; // 리액트 모듈을 불러옵니다.
import { View, Text } from 'react-native'; // 리액트 네이티브의 View와 Text 컴포넌트를 불러옵니다.

const App = () => { // App 컴포넌트를 선언합니다.
  return ( // 컴포넌트의 반환값으로 JSX를 사용합니다.
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> // View 컴포넌트를 사용하며, 스타일 속성을 지정합니다.
      <Text>Hello, World!</Text> // Text 컴포넌트를 사용하여 화면에 "Hello, World!"를 표시합니다.
    </View> // View 컴포넌트의 닫는 태그입니다.
  ); // 반환값을 반환합니다.
}

export default App; // App 컴포넌트를 내보냅니다.