[ReactNative] JSX

공부 도서: 처음 배우는 리액트 네이티브 / 김범준 / 한빛미디어 / 2021

 

● JSX

- 자바스크립트 확장 문법

- 객체 생성과 함수 호출을 위한 문법적 편의를 제공하고자 만들어진 확장 기능

- 리액트 프로젝트에서 사용됨.

- 가독성이 높고 작성하기 쉬움.

- 오류 검사에도 장점이 있음.

- XML과 유사하여 중첩된 구조를 잘 나타낼 수 있음.

---

1. 하나의 부모

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

export default function App(){
    return(
    	<Text>Open App!</Text>
        <StatusBar style="auto" />
    );
}
//<Text>와 <StatusBar>가 하나로 감싸져 있지 않아서 오류 발생

위와 같은 에러를 해결하기 위해서는 <View></View> 컴포넌트로 감싸주면 된다. 하지만 View처럼 특정 역할을 컴포넌트로 감싸지 않으면서 여러 개의 컴포넌트를 반환하고 싶은 경우, 아래와 같이 Fragment 컴포넌트를 사용하면 된다.

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

export default function App() {
    return(
    	<Fragment>
        	<Text>Open App!!</Text>
            <StatusBar style="auto" />
        </Fragment>
    );
}

Fragment 컴포넌트는 단축 문법도 제공한다.

//Fragment 단축 문법
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { Text } from 'react-native';

export default function App() {
    return(
        <>
            <Text>Open App!!</Text>
            <StatusBar style="auto" />
        </>
    );
}

 

2. 자바스크립트 변수

: JSX는 내부에서 자바스크립트의 변수를 전달하여 이용 가능

export default function App(){
    const name = 'GilDong';
    return(
    	<Text>My name is {name}!</Text>
    );
}
//출력 결과: My name is GilDong!

 

3. 자바스크립트 조건문

: JSX에서도 자바스크립트의 조건문을 이용할 수 있음. 단, 제약이 약간 있기 때문에 복잡한 조건인 경우 JSK 밖에서 조건에 따른 값을 설정하고,  JSX 내에서는 최대한 간단하게 작성하는 것이 코드를 좀 더 깔끔하게 작성하는 방법임.

 

- if 조건문

export default function App(){
    const name = 'GilDong';
    return(
    	<View>
    	    <Text>
                {(() => {
                    if (name === 'CheolSu') return 'My name is CheolSu';
                    else if (name === 'GilDong') return 'My name is GilDong';
                    else return 'My name is React Native';
                })()}
            </Text>
    	</View>
    );
}
//출력 결과: My name is GilDong

- 삼항 연산자

export default function App(){
    const name = 'GilDong';
    return(
    	<View>
    	    <Text>
                My name is {name === 'GilDong' ? 'GilDong Hong' : 'React Native'}
            </Text>
    	</View>
    );
}
//출력 결과: My name is GilDong Hong

- AND 연산자와 OR 연산자

export default function App(){
    const name = 'GilDong';
    return(
    	<View>
            {name === 'GilDong' && (
    	        <Text>My name is GilDong</Text>
            )}
            {name !== 'GilDong' && (
    	        <Text>My name is not GilDong</Text>
            )}
    	</View>
    );
}
//출력 결과: My name is GilDong

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

 

4. null과 undefined

: JSX의 경우 null은 허용하지만 undefined는 오류가 발생함.

export default function App(){
    return null;
}
//정상 동작. 화면에는 아무것도 나타나지 않음.

export default function App(){
    return undefined;
}
//오류 메시지

 

5. 주석

: JSX의 주석은 {/**/}

단, 태그 안에서 주석을 사용할 때는 자바스트립트처럼 // 또는 /**/ 사용 가능

export default function App(){
    return(
    	<View>
        {/* Comment */}
            <Text /* Comment */>Comment></Text>
    	    <Text
            //Comment
            >
                Comment
            </Text>
    	</View>
    );
}
//코드블럭에 JSX가 없어서 Javascript 스타일로 했더니 주석 회색 표시가 안 됨. 실제로는 저 부분들 다 주석

 

6. 스타일링

: JSX에서는 HTML과 달리 style에 문자열로 입력하는 것이 아니라 객체 형태로 입력해야 함. 그리고 하이픈(-)으로 연결된 이름은 하이픈을 제거하고 Camel 표기법으로 작성. (예: backgroundColor)

export default function App(){
    return(
        <View
            style={{
                flex: 1,
                backgroundColor: '#fff',
                alignItems: 'center',
                justifyContent: 'center',
            }}
        >
    	    <Text>React Native!!!</Text>
        </View>
    );
}