[react native] JSX 기본 문법 압축 정리

이 글은 <처음 배우는 리액트 네이티브 (김범준, 한빛미디어)>의 내용을 바탕으로 이해한 바를 바탕으로 재구성한 글입니다.
https://github.com/Alchemist85K/my-first-react-native\

GitHub - Alchemist85K/my-first-react-native: [한빛미디어] 처음 배우는 리액트 네이티브 소스 코드입니다.

 

💡 JSX란?

JSX(JavaScript Syntax Extension)는 객체 생성과 함수 호출을 위한 문법적 편의를 제공하기 위해 만들어진 학장기능으로 리액트 프로젝트에서 사용된다.
가독성이 높고 작성하기 쉽다는 장점이 있으며 XML과 유사하다는 점에서 중첩된nested 구조를 잘 나타낼 수 있다.

 

💡 항상 하나의 부모로 감싼다.

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

...
export default function App() {
	return (
			<Text>Open up App.js to start working on your app!</Text>
			<StatusBar style="auto" />
	)
}

: <Text>와 <StatusBar>가 하나의 부모로 감싸져있지 않기 때문에 오류가 발생한다.

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

 

💡 자바스크립트 변수

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

import {StatusBar} from 'expo-status-bar';
import React from 'react';
import {StyleSheet, Text, View} from 'react-native';

export default function App() {
		const name = 'Eunbin';
		return (
			<View style={styles.container}>
				<Text style={styles.text}>My name is {name}</Text>
				<StatusBar style="auto" />
			</View>
		);
}

const styles = StyleSheet.create({
		container: {
			flex: 1,
			backgroundColor: #fff,
			alignItems: 'center',
			justifyContent: 'center',
		},
		text: {
			fontSize: 30,
		},
});

name 변수에 '은넨'이라는 값을 할당하여 text 컴포넌트 안에서 표시

 

💡 자바스크립트 조건문

복잡한 조건인 경우, JSX  밖세어 조건에 따른 값을 설정하고,

간단한 조건인 경우, JSX 내에서 간단하게 작성할 수 있다.

 

✔️간단 조건문

...
export default function App() {
		const name = 'Eunbin';
		return (
			<View style={styles.container}>
				<Text style={styles.text}>
					{(() => {
						if (name === 'Hanbit') return 'My name is Hanbit';
						else if (name === '은넨') return 'My name is 은넨';
						else return 'My name is React Native';
					})()}
				</Text>
				<StatusBar style="auto" />
			</Vliew>
		);
}
...

 

✔️AND 연산자와 OR 연산자

JSX에서는 false는 렌더링 되지 않기 때문에 AND연산자 앞의 조건이 참일 때 뒤의 내용이 나타나고, 거짓인 경우는 나타나지 않는다. 반대로, OR 연산자는 앞의 조건이 거짓인 경우 내용이 나타나고, 조건이 참인 경우 나타나지 않는다.

 

export defualt function App() {
	const name = '은넨';
	return (
		<View style={styles.container}>
			{name === '은넨' && (
				<Text style={styles.text}>My name is 은넨</Text>
			)}
			{name !== '은넨' && (
				<Text style={styles.text}>My name is 은넨</Text>
			)}
	)
}

 

위의 코드에서는 조건식이 true인 첫번째 statement의 뒤의 내용만 나타나므로 "My name is 은넨"이라는 문구가 출력된다. 

 

export default function App() {
  const name = "은넨";
  return (
    <View style={styles.container}>
      {name === "은넨" || <Text style={styles.text}>My name is 은넨</Text>}
      {name !== "은넨" || <Text style={styles.text}>My name is not 은넨</Text>}
    </View>
  );
}

 

위의 코드에서는 조건식이 false인 두번째 statement의 내용인 "My name is not 은넨"이라는 문구가 표시된다.

 

약간 영어 문법의 명령어 + and/or과 같은 개념으로 생각할 수 있겠다.

조건식 + and -> 조건식이 true이면 and 뒤의 내용 나타남 / 조건식이 false이면 and 뒤의 내용 안나타남

조건식 + or -> 조건식이 true이면 or 뒤의 내용 안나타남 / 조건식이 false이면 or 뒤의 내용 나타남

 

💡 null과 undefine

JSX는 null은 허용하지만, undefined가 반환되면 오류가 발생한다.

export default function App() {
	return null;
}

이 코드는 정상적으로 동작하지만(아무것도 표시되지 않음),

 

export default function App() {
	return undefined;
}

이 코드는 오류가 발생하여 동작하지 못한다.

 

💡 주석 처리

JSX의 주석은 {/* ... */}를 이용하여 작성한다.

태그 안의 주석을 사용할 때에는 자바스크립트처럼 /.../이나 /* ... */으로 주석을 사용할 수 있다.

 

💡 스타일링

JSX에서 각 요소에 스타일을 적용하는 방법은 다양하다.

크게, inline styling과 class styling이 있는데, 여기서는 inline styling을 적용하는 방법만 기술하겠다.

JSX에서는 HTML과 달리 style에 문자열로 입력하는 것이 아니라 객체 형태로 입력해야 한다. 또한 style이름은 하이픈(-)으로 연결하는 것이 나닌 카멜표기법(camel case)으로 작성한다.

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

export default function App() {
	return (
		<View
			style={{
				flex: 1,
				backgroundColor: '#fff',
				alignItems: 'center',
				justifyContent: 'center',
			}}
		>
			<Text>Open up App.js to start working on your app!</Text>
	);
}