React JSX 개념에 대한 리마인드

목차

· JSX(JavaScript XML)

· JSX 문법

· 자바스크립트 표현식

· 일반 조건문 대신 삼항연산자 사용

· React DOM은 HTML Attribute 이름 대신 Camel-case Property 명명 규칙을 사용한다.

· JSX 내에서의 주석 사용

· 마치며

· 레퍼런스

---

JSX(JavaScript XML)

· JavaScript에 XML을 추가해 확장한 문법이다.

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

· 브라우저를 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

· JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성할 수 있어 편리하다.

· 자바스크립트에서 HTML을 작성하듯이 하기 때문에 가독성이 높고 작성하기 쉽다. (작업을 하며 주관적인 느낀 점)

여기서 바벨(Babel)이란, JSX를 브라우저에 이해 시키기 위해서 필요한 자바스크립트 컴파일러

// 일반적으로 사용하게 되는 JSX 예시
function App() {
	return (
    	<div> App Component </div>
    )
}

export default App;

// 위와 같이 작성하면, 바벨이 다음과 같이 자바스크립트로 해석해준다.
function App() {
	return React.createElement("div", null, "App Component");
}

JSX 문법

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

Virtual DOM에서 컴포넌트 변화를 감지할 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야  한다는 규칙이 있기 때문이다.

// JSX 문법 선언에 관련된 잘못된 예
function App() {
	return (
    	<div>first App Component</div>
        <div>second App Component</div>
    );
};

export default App;

// JSX 문법 선언에 관련된 정상적인 예
function App() {
	return (
    	<>
        	<div> first App Component </div>
            <div> second App Component </div>
        </>
    );
};

자바스크립트 표현식

· JSX 안에서도 자바스크립트 표현식을 사용할 수 있다. 자바스크립트 표현식을 작성하려면 JSX 내부에서 코드를 { }로 감싸주면 된다.

· 유효한 모든 JavaScript 표현식을 사용할 수 있다.

function App() {
	const name = "hyeon woo";
    return (
    	<div>
        	<div> Hello </div>
            <div> {name} </div>
        </div>
    );
};

export default App;

일반 조건문 대신 삼항 연산자(조건부 연산자) 사용

· if 구문과 for 루프는 JavaScript 표현식이 아니기 때문에 JSX 내부 자바스크립트 표현식에서는 사용할 수 없다.

· 그렇기 때문에 조건부에 따라 다른 렌더링 시 JSX 주변 코드에서 if 문을 사용하거나, { } 안에서 삼항 연산자(조건부 연산자)를 사용 한다.

// if 문을 통해 외부에서 사용하는 방법

function App() {
	let desc = '';
    const loginYn = 'Y';
    if (login === 'Y') {
    	desc = <div> 회원입니다 </div>;
    } else {
    	desc = <div> 비회원 입니다. </div>;
    }
    
    return (
    	<>
        	{desc}
        </>
    );
};

export default App;

// 삼항연산자를 통해 내부에서 사용하는 방법

function App() {
	const loginYn = 'Y';
    return (
    	<>
        	<div>
            	{login === 'Y' ? <div> 회원입니다 </div> : <div> 비회원입니다 </div>}
            </div>
        </>
    );
};

// AND연산자(&&)를 통해 내부에서 사용하는 방법

function App() {
	const loginYn = 'Y';
    return (
    	<>
        	<div>
            	{loginYn === 'Y' && <div> 회원입니다 </div>}
            </div>
        </>
    );
};

export default App;

// 내부에서 즉시실행함수를 사용하는 방법

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

React DOM은 HTML Attribute 이름 대신 Camel-case Property 명명 규칙을 사용한다.

· JSX 스타일링

JSX에서 자바스크립트 문법을 사용하려면 { } 를 사용해야하기 때문에, 스타일을 적용할 때에도 객체 형태로 넣어주어야 한다.

(예를 들어 font-size로 사용되었던 어트리뷰트 명을 fontSize와 같은 카멜 케이스 프로퍼티 명명 규칙을 사용한다)

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

export default App;

· class 대신 className

일반 HTML에서 CSS 클래스를 사용할 때에는 class 라는 속성을 사용하지만, JSX에서는 class가 아닌 className을 사용한다.

function App() {
	const style={
    	backgroundColor: 'green',
        font-size: '12px'
    }
    return (
    	<div className="testClass"> Hello, Human </div>
    );
};

export default App;

JSX 내에서의 주석 사용

· JSX 내에서는 주석을 JS와는 달리 { }으로 묶어서 사용한다.

function App() {
	return (
    	{/* 주석에 대한 예시 */}
        <div> Hello, Human </div>
    );
};

 

· JSX 내부에서 시작 태그 안에 `//`를 사용하면 { }로 굳이 묶지 않아도 주석으로 사용할 수 있다.

function App() {
	return (
    	<>
        	<div
			// 태그 안에서 `//`를 통해 주석을 사용할 수 있다
            >
            </div>
        </>
    );
};

마치며

· 개발자가 JSX를 작성하기만 하면, 리액트 엔진은 Babel을 통해 JSX를 기존 자바스크립트로 해석해준다.

· 이를 `선언형 화면` 기술이라고 하며, 오늘은 React의 기본적은 구조 및 문법에 대해서 알아보았다.

---

레퍼런스

[React] 2. JSX란? (정의, 장점, 문법)