JSX(Javascript Syntax eXtension) 문법

JSX(Javascript Syntax eXtension) 문법이란?

JSX 는 Javascript 를 확장한 문법이다.

JSX 는 React 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법이 아니다. 

브라우저에서 babel 을 사용하여 일반 Javascript 문법으로 변환된다.

 

// JSX 문법 사용
function App() {
	return(
            <div>
                <h1>안녕하세요?</h1>
            </div>
    	)
}

// babel 을 사용한 문법 변환
function App() {
	return React.createElement("h1", null, "안녕하세요?");
}

 

JSX 문법은 Javascript 파일에 HTML 코드를 작성한다.

 

JSX 문법

 

1. JSX 문법에서 return 시 반드시 부모요소는 1개여야 한다.

// 정상적인 문법
function App(){
    return (
        <div>
            <h1>안녕하세요?</h1>
        </div>
    )
}

//에러 문법
function App(){
    return (
        <div>
            <h1>안녕하세요?</h1>
        </div>
        <div>
            <h1>안녕 못해</h1>
        </div>
    )
}

 

위처럼 return 을 통해 JSX 문법을 반환할때 부모 요소는 무조건 1개여야 한다.

Virtual DOM 에서 컴포넌트 변화를 감지할 때 효율적으로 비교하도록 컴포넌트 내부는 하나의 DOM 트리 형태로

이루어져야 한다는 규칙이 있다.

 

2. 자바스크립트 표현식

JSX 문법에서 Javascript 표현식을 사용하려면 {}(중괄호) 로 감싸줘야 한다.

function App() {
    const str = 'obo';
    return (
        <div>
            <h1>안녕하세요?</h1>
            <h2>{str}</h2>
        </div>
    )
}

 

함수안의 유효한 Javascript 값들을 JSX 문법안에서 {} 를 통해 표현할 수 있다.

 

 

3. 삼항연산자 사용 및 표현식

if 문과 for 문 등 Javascript 표현식이 아닌 구문들은 JSX 표현식으로 사용할 수 없다.

조건문이 필요할 경우 삼항 연산자를 통해 JSX 코드 외부나 내부에서 사용할 수 있다.

 

// JSX 문법 외부에서 삼항연산자 사용
function App() {
    let name = '';
    const nameYn = false;
    if(nameYn){
    	name = '<h1>obo</h1>';
    }else {
	name = '<h1>이름 있음</h1>';
    }
    return (
        <div>
        	{name}
        </div>
    )
}

 

// JSX 문법 내부에서 삼항연산자 사용
function App() {
    let name = '';
    const nameYn = false;
    if(nameYn){
    	name = '<h1>obo</h1>';
    }else {
	name = '<h1>이름 있음</h1>';
    }
    return (
        <div>
        	{nameYn == true ? (<h1>obo</h1>) : (<h1>이름 있음</h1>)}
        </div>
    )
}

 

 

4. React DOM 은 camelCase 프로퍼티 명령 규칙을 사용

 

JSX 문법 style 사용

function App() {
    const style = {
        fontSize: '20px',
        backgroundColor: 'black'
    }

    return (
    	<div style={style}>안녕하세요? 스타일 적용했어요.</div>
    )
}

 

class 속성 대신 className 속성 사용

function App() {
    return (
    	<div className="oboClass">안녕하세요? 스타일 적용했어요.</div>
    )
}