[React] JSX 알아가기

JSX( A syntax extension to javaSctript)

 - 자바스크립트의 문법을 확장 시킴

 - XML + HTML = JavaScript

 

 element를 h1에 저장

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

역할

 - 내부의 html코드를 javascript으로 변환함

 

React.createElement(
  type,  //Element 유형과 타입
  [props], //속성
  [...children] //Element포함하고 있는 자식


)

 

장점

 1) 간결한 코드   

//JSX 사용함

<div>Hello, {name}<div>

//JSX 사용안함
React.createElement('div',null,'hello,${name}');

2) 가독성 향상

3) Injection Attacks 방어

 

사용법

 ... XML/HTML

{JavaScript 코드}

... XML/HTML

 

html 속성에 자바스크립트 넣기

function getGreeting(user){
  if(user){
     return <h1>Hello,{fotmatNsme(user)}!</h1>; // {fotmatNsme(user)} 자바스크립트
  }
  return <h1>Hello, Stranger.</h1>
}

 

태그 속성에 값을 넣는 방법

// 큰따음표 사이에 문자열을 넣음
const element = <div tabIndex="0"></div>;

// 중괄호 사이에 자바스크립트 코드를 넣음
const element = <img src={user.avatarUrl}></img>

자식을 정의하는 방법

const element = (
 <div>
   <h1>안녕</h1>
   <h2>리액트 공부</h2>
 </div>
);