React JSX 문법이란?

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

JSX은 Javascrpint의 공식적인 문법이 아니다.

브라우저에서 실행하기 전 바벨(리액트 라이브러리)을 사용하여 자바스크립트 형태 코드로 변환된다.

// JSX 예시
function App(){
	retrun(
    <h1>테스트</h1>
    );
}

// 위와 같이 작성했을 시, 바벨이 아래와 같이 Javascript로 해석해준다.
function App(){
	return React.createElement("h1", null, "테스트");
}

 

JSX문법 

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

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

// 잘못된 사용 (에러발생)
function App(){
	return (
    	<div>Test1</div>
        <div>Test2</div>
    );
}


// 올바른 사용
function App(){
	return (
    	<div>
    		<div>Test1</div>
        	<div>Test2</div>
        </div>
    );
}

// 올바른 사용2
function App(){
	return (
    	<Fragment>
    		<div>Test1</div>
        	<div>Test2</div>
        </Fragment>
    );
}

// 올바른 사용3
function App(){
	return (
    	<>
    		<div>Test1</div>
        	<div>Test2</div>
        </>
    );
}

 

2. 반드시 태그는 닫혀야 한다.

 - <div>, <p>, <span>, <a> 같이 짝이 있는 태그의 경우 반드시 닫는 태그가 존재해야 한다. 

 - <img/>, <input/>, <br/> 같은 단독 태그(self-closing tag)의 경우에는 반드시 태그를 닫아줘야 한다.

 

3. 자바스크립트 표현

JSX내부에서 코드를{ } 로 감싸면  JavaScript 표현식을 사용할 수 있다.

 

function App() {
	const name = 'My Name';
	return (
		<div>
			<div>Hello</div>
			<div>{name}</div>
		</div>
	);
}

 

4. JSX 내부에서는 if문을 사용할 수 없다. 

- JSX 밖에서 if 문을 사용하거나, { } 안에서 삼항 연산자를 사용한다.

// 외부에서 사용
function App() {
	let desciption = '';
	const test = 'yes';
	if(test === 'yes') {
		desc = <div>Yes 입니다.</div>;
	} else {
		desc = <div>No 입니다.</div>;
	}
	return (
		<>
			{desciption}
		</>
	);
}


// 내부에서 사용
function App() {
	const desciption = 'yes';
	return (
		<>
			<div>
				{desciption === 'yes' ? (
					<div>Yes 입니다.</div>
				) : (
					<div>No 입니다.</div>
				)}
			</div>
		</>
	);
}

 

5. AND 연산자(&&) 사용

 - 특정 조건을 만족할 때만 내용을 보여준다. (조건이 만족하지 않을 경우 아무것도 노출되지 않는다.)

function App() {
	const desciption = 'yes';
	return (
		<>
			<div>
				{desciption === 'yes' && <div>Yes 입니다.</div>}
			</div>
		</>
	);
}

 

 - falsy한 값인 0은 예외적으로 화면에 나타난다.

// 아래 코드는 화면에 '테스트'를 보여주는 것이 아닌 숫자 0을 보여준다.
const number = 0;
return number && <div>테스트<div>

 

6. OR 연산자(||) 사용

 - 리액트 컴포넌트에서는 함수에서 undefined나 null을 반환하면 렌더링을 하려하면 오류가 발생한다. JSX 내부에서 undefined나 null을 렌더링하는 것은 괜찮다.

 - JSX 내부에서 undefined나 null을 렌더링하면 아무것도 보여주지 않는다.

 - OR 연산자는 특정 값이 undefined나 null일 경우 보여주고 싶은 문구가 있을 때 주로 사용한다.

// undefined 렌터링 시 오류발생
function App(){
	const name = 'undefined';
	return name;
}

// OR 연산자 사용
function App() {
  const name = undefined;
  return name || "값이 undefined";  
}

// JSX 내부에서 undefined, null 허용
function App() {
  const name = undefined;
  return (
  	<div>{name}</div>
  );
}

 

6. JSX 스타일링

 - 카멜 표기법으로 작성해야 한다. ex) background-color -> backgroundcolor

function App() {
	const style = {
		backgroundColor: 'blue',
		fontSize: '12px'
	}
	return (
		<div style={style}>테스트</div>
	);
}

 

JSX은 XSS 공격을 방어한다.

- 기본적으로 React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 Escape 처리하므로, 애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않는다. 모든 항목은 렌더링 되기 전에 문자열로 변환된다. 이런 특성으로 인해 XSS (cross-site-scripting) 공격을 방지할 수 있다.

 

 

참고

https://goddaehee.tistory.com/296

https://velog.io/@gyumin_2/React-JSX%EB%9E%80%EC%A0%95%EC%9D%98-%EC%9E%A5%EC%A0%90-%EB%AC%B8%EB%B2%95-%ED%8A%B9%EC%A7%95-%EB%93%B1

https://chanhuiseok.github.io/posts/react-3/