[React Native] React Native의 핵심, JSX 문법 완전 정복

JSX란 무엇인가?

JSX(JavaScript XML)는 React Native에서 UI를 설계할 때 사용되는 특별한 JavaScript 문법입니다.

HTML과 유사한 문법을 JavaScript 내부에서 사용할 수 있도록 하며, 코드의 가독성과 유지보수성을 높여줍니다.

JSX는 React Native에서 컴포넌트 기반의 화면을 정의하는 기본적인 방식이므로, 이를 정확히 이해하는 것이 중요합니다.

출처: 티스토리-phsun102

---

JSX 문법의 주요 특징과 사용법

1. JSX의 기본 문법

JSX는 HTML과 비슷해 보이지만, 실제로는 JavaScript의 구문 확장입니다.

JSX는 React Native의 컴포넌트와 함께 사용되며, 이를 통해 화면 요소를 정의할 수 있습니다.

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

const App = () => {
  return (
    <View>
      <Text>Hello, React Native!</Text>
    </View>
  );
};

export default App;

위 코드에서 <View>와 <Text>는 JSX 문법으로 작성된 컴포넌트입니다.

2. JSX 문법의 주요 특징

(1) 컴포넌트는 반드시 하나의 부모 요소로 감싸야 함

JSX에서는 여러 요소를 반환하려면 반드시 하나의 부모 요소로 감싸야 합니다.

// 올바른 예시
return (
  <View>
    <Text>첫 번쨰 줄</Text>
    <Text>두 번째 줄</Text>
  </View>
);

// 잘못된 예시
return (
  <Text>첫 번째 줄</Text>
  <Text>두 번째 줄</Text>
);

(2) JavaScript 표현식 사용

JSX 내부에서 중괄호 { } 를 사용하여 JavaScript 표현식을 삽입할 수 있습니다.

const name = "Project Chan";
return <Text>Welcom to {name}!</Text>;

(3) 스타일 적용

React Native에서는 HTML의 class 속성 대신 style 속성을 사용합니다.

return (
  <Text style={{ fontSize: 20, color: 'blue' }}>
  	스타일 적용된 텍스트
  </Text>
);

(4) 조건부 렌더링

JavaScript의 삼항 연산자나 조건문을 사용하여 컴포넌트를 조건부로 렌더링할 수 있습니다.

const isLoggedIn = true;
return (
  <Text>{isLoggedIn ? "Welcome back!" : "Please log in."}</Text>
);

(5) 배열 렌더링

JSX에서는 배열을 사용해 다수의 컴포넌트를 렌더링할 수 있습니다.

const items = ['Apple', 'Banana', 'Cherry'];
return (
  <View>
    {items.map((item. index) => (
      <Text key={index}>{item}</Text>
    ))}
  </View>
);

3. JSX와 네이티브 컴포넌트의 연결

JSX에서 사용하는 <View>, <Text>와 같은 태그는 HTML 요소가 아니라 React Native의 네이티브 컴포넌트입니다.

• <View>: 네이티브의 div 역할을 하며, 레이아웃을 잡는 데 사용됩니다.
• <Text>: 텍스트 표시를 위한 컴포넌트입니다.

---

React Native에서 JSX의 중요성

JSX는 React Native에서 화면을 구성하는 기본적인 도구입니다.

HTML과 비슷한 문법 덕분에 학습 곡선이 낮지만, JavaScript와의 결합을 이해하는 것이 핵심입니다.

JSX를 마스터하면 React Native로 효율적이고 유지보수 가능한 코드를 작성할 수 있습니다.

 

JSX 소개 – React