JSX

JSX란

const element = <h1>Hello, world!<h1>;

JSX는 자바스크립트를 확장한 문법으로 자바스크립트의 모든 기능이 포함되어 있다. JSX는 함수 호출과 객체 생성을 위한 뭄법적 편의를 제공하고 특히 React.createElement() 호출을 반복해야 하는 불편을 해소한다.

 

jsx특징 

1. 반드시 하나의 엘리먼트로 감싸야한다.
2. 자바스크립트 코드를 적용할 땐 { } 안에 작성한다.
3. JSX 내부에선 if문을 사용할 수 없다. IIFE or 삼항연산자 사용
4. 엘리먼트의 클래스 이름을 적용할 때, className을 사용한다.

 

 

JSX에 표현식 포함하기 

const name = "josh Perez"
const element = <h1>hello, {name}</h1>;

ReactDOM.render(
	element,
    document.getElementById('root')
);

JSX의 중괄호 안에는 모든 자바스크립트 표현식을 넣을수 있다. 

function formatName(user) {
	return user.firstName + " " + user.lastName;
}

const user = {
    firstName: "Harper"
    lastName: "Perez"
};

const element = (
    <h1>
      Hello, {formatName(user)}!
    </h1>
);

ReactDOM.render(
    element,
    document.getElementById("root")
);

위의 예시는 함수 호출 결과인 formatName(user)을 <h1>엘리먼트에 포함했다.

 

JSX도 표현식으로 자바스크립트 함수에 호출이 되고 객체로 인식이 된다. (if, for문에서 사용가능 하고 변수할당 함수로서 반환도 가능)

 

function getGreeting(user) {
  if(user){
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

 

JSX 속성 정의

속성에 따옴표를 이용해 문자열 리터럴을 정의할 수 있고 중괄호를 사용하여 어트리뷰트에 자바스크립트표현식을 삽입할 수도 있다.

const element = <div tagIndex="0"></div>;

const element = <img src={user.avatarUrl}></img>;

어트리뷰트에서 자바스크립트 표현식을 삽입할 때에는 따옴표("")와 중괄호({})중 하나만 사용해야 한다.

 

JSX로 자식 정의

const element = (
	<div>
   	    <h1>Hello!</h1>
            <h2>Goodto see you here.</h2>
	</div>
);

JSX는 주입 공격을 방지

기본적으로 React DOM에서 모든 항목은 렌더링 되기전에 문자열로 변환되기 때문에 XSS(cross-site-scripting)공격을 방지할 수 있다.

 

JSX는 객체를 표현

Babel은 JSX를 React.createElement() 호출로 컴파일한다. 다음 두 예시는 동일하다.

const element = (
	<h1 className= "greeting">
    	Hello, world!
        </h1>
);

const element = React.createElement(
	"h1",
	{className: "greeting"},
	"Hello, world!"
);

React.createElement()는 버그가 없는 코드를 작성하는 데 도움이 되도록 몇 가지 검사를 수행하며, 기본적으로 다음과 같은 객체를 생성한다.

const element = {
	type: "h1" ,
	props: {
		className: "greeting" ,
		children: "Hello, world!"
	}
};