[React Native] JSX

JSX란?

JavaScript XML

자바스크립트에 XML을 추가한 확장형 문법

XML 또한 HTML의 표현법을 확장한 문법이므로

JSX = HTML + JS라고 보면 될 듯하다. 

하나의 파일에 JS와 HTML을 동시에 작성할 수 있다.

객체 생성과 함수 호출을 위한 문법적 편의를 제공하기 위해 만들어진 확장 기능으로 React, React Native에서 사용된다.

JSX 장점

• 가독성이 높다.
• 작성하기 쉽다.
• XML과 유사하다는 점에서 중첩된 구조를 잘 나타낼 수 있다.

JSX 문법

1. 하나의 부모

여러 개의 요소를 표현하는 경우 반드시 하나의 부모로 감싸야한다.

export default function App() {
  return (
    <View style={styles.container}>
      <Text></Text>
      <Text></Text>
    </View>
  );
}

• View : UI를 구성하는 가장 기본적인 요소로 웹 프로그래밍에서 <div>와 비슷한 역학을 하는 컴포넌트.
• Fragment : 여러 개의 컴포넌트를 반환하고 싶은 경우 사용. View처럼 특정 역할을 하는 컴포넌트도 아니고, DOM에 별도의 노드로 추가되지도 않는다. 단축 문법은 그냥 다음과 같이 사용할 수 있다. 

export default function App() {
  return (
    <>
      <Text></Text>
      <Text></Text>
    </>
  );
}

(스타일이 없어져서 글자의 위치가 변한다.)

2. 자바스크립트 변수

JSX는 내부에서 자바스크립트의 변수를 전달하여 이용할 수 있다. 

export default function App() {
  const name = 'yoojin';
  return (
    <View style={styles.container}>
      <Text>hello</Text>
      <Text>{name}</Text>
    </View>
  );
}

3. 자바스크립트 조건문

1) If 조건문

<Text>
  {(() => {
    if (name === 'yoojin') return 'Hello Yoojin';
    else if (name === 'yang') return 'Hello Yang';
    else return 'no name';
  })()}
</Text>

( ) 괄호 안 해주면 오류 난다.

2) 삼항 연산자

<Text>My name is {name === 'yoojin' ? 'yoojin' : 'React native'}</Text>

3) AND, OR 연산자

{name === 'yoojin' && <Text>My name is Yoojin</Text>}
{name !== 'yoojin' && <Text>My name is not Yoojin</Text>}

JSX에서 true는 랜더링이 되고 false는 랜더링이 되지 않는다. 즉 AND 연산자 앞의 조건이 참일 때만 뒤의 내용이 나타나고 거짓인 경우 나타나지 않는다.

OR 연산자는 AND 연산자와 반대로 앞의 조건이 거짓인 경우 내용이 나타나고, 조건이 참인 경우 나타나지 않는다. 

4. null과 undefined

JSX에서 null은 허용하지만 undefined는 오류가 난다.

5. 주석

JSX 주석 : {/* */}

태그 안에서의 주석 : // 또는 /* */

6. 스타일링

JSX에서는 HTML과 달리 style에 문자열로 입력하는 것이 아니라 객체 형태로 입력해야 한다.

그리고 하이픈 방식이 아닌 카멜 표기법으로 작성해야 한다. 

자세한 내용은 아래에 정리해두었다. 

2021.08.21 - [React Native] - [React Native] 스타일링 적용 방법

[React Native] 스타일링 적용 방법