JSX

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

JSX란?

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

 

Html과 JavaScript를 Mix 해놓은 듯한 코드는 Javascript를 확장한 문법이다. JSX라고 하면 특정 언어 같아 보이지만, JavaScript의 모든 기능이 포함되어 있다. 모든 기능이 포함되어 있다는 말은 ES6 문법을 사용할 수 있다는 말과 같다.

 

React에서 JSX사용은 필수가 아니지만 가독성 측면에서 JSX 사용은 효과적이다.. 또한 React에서 에러 및 경고 메시지를 표시하여 도움을 준다.

 

JSX에 표현식(javascript) 포함하기

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

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

JSX의 중괄호 안에는 유효한 모든 JavaScript 표현식을 넣을 수 있습니다. 예를 들어 2 + 2, user.firstName 또는 formatName(user) 등은 모두 유효한 JavaScript 표현식이다.

 

표현식에는 2가지의 유형이 있다.

1. 첫번째는, 변수에 값을 할당시키는 것 (ex: x = 7 )
2. 두번째는 단순히 값을 갖는 것 ( ex: 3 + 4 )

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')
);

위 코드에서는 JavaScript 함수 호출의 결과인 formatName(user)을 <h1> 엘리먼트에 포함시킬 수도 있다.

 

JSX 속성 정의

속성에 따옴표를 이용해 문자열 리터럴을 정의할 수 있습니다.

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

중괄호를 사용하여 어트리뷰트에 JavaScript 표현식을 삽입할 수도 있습니다.

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

JSX 태그 속성에 JavaScript 표현식을 사용하려면 따옴표("" || '') 또는 중괄호({ }) 중 하나만 사용한다(혼용은 불가하다)

 

JSX 자식 정의

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

JSX 태그는 HTML 태그처럼 자식 태그를 가질 수 있다.

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

 

XSS를 방지

const title = response.potentiallyMaliciousInput;

const element = <h1>{title}</h1>;

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

 

 

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!'
  }
};

JSX 문법을 사용하면 객체가 생성이 되고 이러한 객체를 “React 엘리먼트”라고 하며, DOM을 구성하고 최신 상태로 업데이트 하는데 사용한다.

 

출처 MDN, React 공식문서