[React] JSX 이해하기

리액트는 JSX라는 언어를 사용하는데, 이는 Javascript XML의 줄임말이다. Javascript 라는 말이 들어가는 것에서 알 수 있듯이 Javascript 언어를 기반으로 하는데, 뒤에 XML(Extensible Markup Language) 이라는 말이 붙는 것에서 이것이 HTML과 같이 마크업으로 쓰이는 언어라는 것을 보여준다.

 

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

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

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

 

위의 코드가 기본적이라고 볼 수 있는데, export 문 뒤의 App()이라는 함수 내부를 보면 return을 활용하여 HTML의 컴포넌트와 유사하게 <View>라는 요소를 출력하고 있음을 볼 수 있다. 또한 style이라는 속성(attribute)으로 아래에 정의된 styles라는 객체의 container 값을 참조하도록 하고 있는데, 이는 웹에서의 스타일시트와 굉장히 유사한 구조이다.

 

즉, JSX는 Javascript 형태를 취하지만 웹에서의 마크업과 스타일 사용 등을 유사하게 사용하는 응용된 형태의 마크업 언어이며 이 내용들은 함수(function)와 상수(constant)로 정의되어 지시된다.

 

이러한 배경은 웹 언어에 익숙한 퍼블리셔 등에게 진입장벽을 낮추는 요인이 되면서도 동시에 비슷한 만큼 헷갈리는 요소가 되기도 하는데, 때문에 상세한 부분들에 대해 정확히 알고 구분하는 것이 중요하다.