[React] 입문 / JSX

JSX 란?

JSX(JavaScript XML) 은 JavaScript 에 XML을 추가하여 확장한 문법이다.

브라우저에서 실행되기 전 babel(바벨)에 의해 자바스크립트 코드로 변환된다.

 

JSX 특징

1. 닫힘 규칙

JSX 문법에서 태그 사용 시 항상 닫는 태그를 사용 해야 한다.

const element = () = > {
	<h1> Hello, espania </h1> //항상 닫는 태그를 사용해야 한다.
    	<h1> Hello, espania  //잘못된 태그 사용
}

2. 반드시 하나의 부모 태그를 가지고 있어야 한다.

JSX를 사용하여 Component를 만들고 return 하려면, 반드시 하나의 최상위 태그로 다른 모든 태그들을 감싸주어야 한다.

function component1(){
	let name = 'espania';
    
        return (
            <Component0/>	//컴포넌트 사용
            <header>
                <h2> JSX expressions must have on parent element. </h2>
            </header>
        );  //오류 발생
}

function component1(){
	let name = 'espania';
    
        return (
            <div>
                <Component0/>	
                <header>
                    <h2> JSX expressions must have on parent element. </h2>
                </header>
            </div>
        );  //정상 작동
}

다른 방법으로는 React.fragment 라는 기능을 이용 해서 최상위 태그를 대체 할 수 있다.

import React from 'react';	//import를 통해서 react 기능 불러오기

function component1(){
	let name = 'espania';
    
        return (
            <React.Fragment>
                <Component0/>	
                <header>
                    <h2> JSX expressions must have on parent element. </h2>
                </header>
            </React.Fragment>
        ); 
}

 

3. 자바스크립트의 값 사용

{} 중괄호를 사용하면 자바스크립트의 변수 나 값을 포함할 수 있다.

function component1(){
	let name = 'espania';
	const number = 5;
        const func1 = () => {
            return 'funcExamp';
        }
    
        return (
            <div>
                <Component0/>	
                <header>
                    <h2> JSX expressions can use JS expresions. </h2>
			{name}	//변수
                    	{1+2}	//값의 연산
                    	{'문자열'}	//문자열
			{func1()}	//함수

			{number}는 : {number %2 === 0 ? "작수" : "음수"}	//조건부 렌더링
                </header>               
            </div>
        );  
}

중괄호 안에 boolean 값(true,false) 이나, 배열을 넣을수 없다.

참고