[React] 2. JSX

출처: React 공식 홈페이지

JSX 소개 – React (reactjs.org)

 

 

1. JSX 의 예시

 > javascript의 확장 문법. 자바스크립트 + 태그

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

 

 

2. 자동 세미콜론 삽입 방지용 가로 () 사용 권장

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

3. JSX도 표현식이다.

> if문, for문 안에 사용할 수 있다. 

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

 

 

4. JSX 속성 정의( 태그 속성 정의인듯? 내생각)

(1) 따옴표로 문자열 정의.  

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

(2) 중괄호를 사용해 Javascript 표현식 삽입가능 

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

(3) 한 속성 안에 두개를 동시에 사용하지는 말것.

(4) 명명규칙은 Javascript를 따라간다. class 속성은 className이 된다.

 

5. JSX 자식 정의

- JSX 태그는 자식을 포함할 수 있다.

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

6. Babel은 JSX를 React.createElement() 호출로 컴파일합니다.

(1)

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

 

 

(2)

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

 

 

위 두개는 동일합니다.

cf) Babel이란? ECMAScript 2015+ 버전 이상의 코드를 구버전 호환 가능 코드로 변환해주는 오픈소스