[React] JSX(JavaScript XML) 알아보기

JSX는 JavaScript XML의 약자로, 리액트 컴포넌트의 독립화에 최적화된 언어입니다. JSX는 XML에 코딩하는 것처럼 HTML 코드를 JS 파일에 넣을 수 있습니다. 이러면 별도의 HTML 파일 호출 없이, 하나의 JS 파일로 하나의 컴포넌트를 완전히 구현할 수 있습니다.

JSX는 리액트의 개발을 위해 만든 언어이기 때문에, 리액트와 마찬가지로 공식 자바스크립트 문법이 아닙니다.

 

문법 1. 카멜 케이스(Camel Case) 네이밍 규칙을 사용한다.

JSX에서는 데이터가 객체로 전달되기 때문에 HTML 대신 카멜 케이스 네이밍 규칙을 사용합니다.

// X HTML 네이밍 규칙
let background-color;
let font-size;

// O 카멜 케이스 네이밍 규칙
let backgroundColor;
let fontSize;

📌 변수에 저장해서 사용할 때

function App() {
    const style = {
        backgroundColor: "green",
        fontSize: "12px"
    }
    return (
        <div style={style}>Hello, taedonn</div>
    );
}

📌 JSX 내부에서 사용할 때

function App() {
    return (
        <div style={backgroundColor:'green'}>Hello, taedonn</div>
    );
}

📌 HTML과 아예 다른 이름을 가지고 있는 속성도 있습니다.

HTML	JSX
class	className
for	htmlFor
checked	defaultChecked
…	…

 

문법 2. 반드시 하나의 부모 요소가 감싸는 형태여야 한다.

가상 DOM에서 컴포넌트의 변화를 효율적으로 비교할 수 있게 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있습니다.

📌 에러 케이스

/* 
Failed to compile
parsing error : adjacent JSX elements be wrapped in an enclosing tag
Did you want a JSX fragment <>...</>? 
*/

function App() {
    return (
        <div>Hello</div>
        <div>I am taedonn</div>
    );
}

📌 정상 케이스

function App() {
    return (
        <>
            <div>Hello</div>
            <div>I am Taedonn</div>
        </>
    );
}

 

문법 3. 자바스크립트 표현식을 사용할 수 있다.

JSX 내부에서 자바스크립트 코드를 {}로 감싸주면 됩니다.

function App() {
    const name = "taedonn";
    return (
        <div>Hello, I am {name}</div>
    );
}

 

문법 4. if문 대신 삼항연산자를 사용한다.

JSX 내부에서는 if문 대신 삼항연산자를 사용합니다. 왜 그런지 찾아보니 if문이 자바스크립트 표현식이 아니어서라고 합니다. if문이 표현식이 아닌 이유는 표현식은 그 자체로 값을 가지거나, 어떤 것에 값을 할당하는 것이어야 되는데, if문은 조건은 만들지만 결과를 특정하지는 않기 때문이라고 이해했습니다.

📌 JSX 외부에서 사용

function App() {
    let name = "";
    const loginYN;
    if (loginYN == "Y") { intro = <div>Taedonn 입니다.</div> }
    else { intro = <div>비회원 입니다.</div> }
    return (
        <div>{intro}</div>  
    );
}

📌 JSX 내부에서 사용

function App() {
    const loginYN;
    return (
        <div>
            { loginYN == "Y" ? 
            ( <div>Taedonn 입니다.</div> ) : 
            ( <div>비회원 입니다.</div> )}
        </div>
    );
}

📌 연산자 사용

// 조건이 만족되지 않을 경우 아무것도 노출되지 않는다.

function App() {
    const loginYN;
    return (
        <div>
            { loginYN == "Y" && <div>Taedonn 입니다.</div> }
        </div>
    );
}

📌 즉시 실행 함수 사용

function App() {
    const loginYN;
    return (
        <div>
            {(() => {
                if (loginYN == "Y") {return (<div>Taedonn 입니다.</div>)}
                else { return (<div>비회원 입니다.</div>) }
            })()}
        </div>);
}

 

문법 5. 자바스크립트 주석 표현 방식을 사용한다.

자바스크립트 주석 표현 방식과 동일하게 사용합니다. 자바스크립트 문법이기 때문에 겉을 {}로 감싸줘야 합니다.

📌 한 줄 일 때

function App() {
    return (
        <>
            {/* 주석 내용 여기 */}
        </>
    );
}

📌 두줄 이상일 때

function App() {
    return (
        <>
            {
                // 주석 내용 여기
                // 주석 내용 여기
            }
            {
                /* 
                    주석 내용 여기
                    주석 내용 여기 
                */
            }
        </>
    );
}

 

레퍼런스

• JSX란? (정의, 장점, 문법)