[React] JSX

JSX
JSX(Javascript XML)은 자바스크립트에 XML을 확장한 문법이다.

브라우저가 실행되기 전에 Babel을 사용하여 자바스크립트 형태의 코드로 변환이 된다.

function App(){
	return(
    	<div>
      		<h1>Hello World</h1>
      	</div>
    );
}

이 코드는 다음과 같이 변환된다.

function App(){
	return React.createElement("div",null,React.createElement("h1",null,"Hello World"));
}

문법

1 자바스크립트 표현식을 { }로 감싸서 사용할 수 있다.

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

2 JSX는 여러 요소를 포함할 수 있지만 반드시 하나의 부모 요소로 감싸야 한다.

다음코드는 부모요소로 감싸지 않아서 에러가 나올 것이다.

function App(){
    return(
      	<h1>Hello World</h1>
 		<p>jsx</p>
    );
}

그래서 다음과 같이 고쳐야한다.

function App(){
    return(
    	<div>
      		<h1>Hello World</h1>
      		<p>jsx</p>
      	</div>
    );
}

3 조건부 연산자를 사용하여 조건식을 표현해야 한다.

if문은 자바스크립트 표현식이 아니기 때문에 JSX에서 사용할 수 없다. 그래서 if문을 JSX 외부에서 사용하여 사전에 처리하여 사용하거나, JSX 내부에서 === 조건부 연산자를 이용해 사용할 수 있다.

//JSX 외부에서 if문을 사용해 사전에 처리
function App(){
	const name = 'react'
    let A = '';
    
  	if(A==='react') A = <h1> Hello react</h1>;
    else A = <p>jsx</p>;
      
  	return(
    	<div>
      		{A}
    	</div>
  	);
}

//JSX 내부에서 조건부 연산자를 이용
function App(){
	const name = 'react'
  	return(
    	<div>
      		{name === 'react'?(
             	<h1>Hello World</h1>
            ):(
             	<p>jsx</p>
    		)}
    	</div>
  	);
}

4 DOM 요소에 스타일을 적용할 때 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어주어야한다. 또한 스타일 이름은 camelCase로 작성해야 한다.

function App(){
  	const style = {
    	backgroundColor: 'black',
      	color: 'white',
      	fontSize: '20'
    };
  	return(
    	<div style={style}>
      		Hello world
    	</div>
  	);
}

5 JSX에서 HTML 속성을 작성하듯이 속성을 추가할 수 있지만 JavaScript 스타일로 작성해야 하는 경우가 있다. ex)class 대신 className, onclick 대신 onClick

6 JSX내부에서 주석을 사용할 때는 {/* */}형태로 작성해야한다.

function App(){
	const name = 'react'
  	return(
    	<div>
      		{/* 주석 */}
    	</div>
  	);
}