[React JS] JSX의 특징

JSX란?

JavaScript 코드에서 HTML형식을 그대로 사용할 수 있게 변환해준다.

• 변환 전 코드

var a = (
  <div>
    welcome to <b>React CodeLab</b>
  <div>
);

• 변환 후 코드

'use strict';

var a = React.createElement(
  "div", 
  null, 
  "Welcome to", 
  React.createElement(
    "b",
    null, 
    "React.js CodeLab"
  )
);

JSX의 특징

1. Nested Element

모든 JSX 형태의 코드는 container element 안에 포함시켜야 한다.

/*에러 발생 코드*/
render() { 
  return (
    <h1>Hi</h1>
    <h2>I am Error</h2>
    )
}

/*컴포넌트에서 여러 Element를 랜더링 할 때
  꼭  container eklement 안에 포함시켜주세요*/
  
render() { 
  return (
    <div>
      <h1>Hi</h1>
      <h2>Yay! Error is gone!</h2>
    </div>
    )
}

2. JavaScript Expression

JSX안에서 JavaScript 를 표현할 때는 {} 으로 wrapping을 해야한다.

render() {
  let text = "Hello React!"; 
  return (
    <div>{text}</div>
    );
}

/*if else문은 JSX에서 사용 불가
  이에 대한 대안은 tenary expression
  condition ? true: false*/

render() {
  return (
    <p>{1==1 ? : 'True': 'False'}</p>
  );
}

3. Inline Style

JSX 안에서 Style을 설정할 때는, String 형식을 사용하지 않고 key가 camelCase인 객체를 사용해야 한다.

render() { 
  let style = { 
    color: 'aqua',
    backgroundColor: 'black'
  };
  
  return (
    <div style={style}>React CodeLab</div>
  );
  
  /*JSX 안에서 class를 설정 할 때는 class= 가 아닌 className= 를 사용하세요.*/
render() { 
  return (
    <div className='box'>React CodeLab</div>
  ); 
}

4. Comments

주석을 작성할 떄는 {/ ... /} 형식으로 작성한다.

/*주의사항 : container element 안에 주석이 작성되어야 한다.*/
render() { 
  return (
    <div>
      {/*This is how you write the comment*/}
      {/*Multi-line
         Testing*/}
	  React CodeLab
    </div>
   ); 
}