React - JSX

JSX란 

자바스크립트의 확장 문법으로 XML과 비슷하게 생겼다.

JSX는 리액트에서 사용하는 방식중 하나이다 

JSX

var a = (
 <div>
     <h1>리액트 <i>스터디</i> </h1>
 </div> 
)

이러한 모습을 하고있는데 

javascript에 Xhtml을 넣은 모습이다

이 코드는 리액트에서만 사용가능하기 때문에

바벨로 컴포넌트를 트리구조로 정의되어 변환하는데

JS

var a = React.createElement(
 "div",
 null,
 React.createElement(
  "h1",
  null,
  "리액트",
   React.createElement(
    "i",
    null,
    "스터디"
   )
 )   
)

이렇게 변환 된다.

이게 무슨뜻이냐면 

React.createElement(
  "h1",   //요소
  null,   //기능
  "리액트" //요소 안 ㅐ용
)

React의  createElement함수를 통해 요소를 생성할수있는데 

"div" 태그에 

속성은 null (추가하지 않는다.)는 뜻으로

<div> 안에 <h1>을 추가할때도 동일하게 

createElement함수를 사용하여 

"h1" 태그에 

속성은 null

<h1>안의 텍스트는 "리액트"

를 생성한다는 뜻이다. 

바벨 preset

ES6에는 babel-preset-es2015를 적용하며, JSX를 지원하려고 babel-preset-react를 적용하는 것이다. 그리고 아직 공식적으로 릴리스한 것은 아니지만 차기 문법인 ES2016(ES7)문법들도 preset들을 받아서 사용할 수 있게 된다.

JSX의 장점

1. 가독성이 높다.

2. 오류검사 ( 바벨이 코드를 변환하는 과정에서 오류를 확인한다.)

Component

이제 App.js 를 살펴보면

import React, { Component } from 'react';
 
class App extends Component {
  render() {
     return( <h1> React </h1>)
  }
)

이런식으로 있는데 

render()를 사용하기 위해선 Component를 확장 시켜야 된다.

 import에서 React , { Component } from 'react'; 는  

let Component = React.Component ; 

이런식으로 만들려먼 어떻게 해야될까 

class App extends Component {
  render() {
     return( 
        <h1> React </h1>
        <h2> Test </h2>
    )
  }
)
 

이렇게 만들면 에러가 난다.

이건 리액트는 오직 하나의 부모요소만을 감싸야하는게

Virtual DOM에서 컴포넌트 변화를 감지해낼때 효율적으로 비교할수 있도록 

DOM트리 구조 하나여야 한다는 규칙이 있기 때문이다

그렇기에

class App extends Component {
  render() {
     return( 
        <div>
            <h1> React </h1>
            <h2> Test </h2>
        </div>
    )
  }
)
 

이렇게 감싸줘야 하지만

필요없는 요소가 생기고 기존에 설정했던 css도 틀어지게 될 수도 있다

그래서 나온게 Fragment인데

import React, { Component ,Fragment} from 'react';
 
class App extends Component {
  render() {
   
    return (
      <Fragment>
        <h1> React </h1>
        <h2> Test </h2>
      </Fragment>
    );
  }
}

이렇게 하면 

실제 웹 DOM에선 <h1>과 <h2>만 있는것을 확인할 수 있다.

그리고 주의할 것은 HTML5가 아닌 XHTML방식으로 

단일 요소 일때는 반드시 끝을 닫아주어야한다.

ex) <input type="text" />  또는 <input type="text" ></input>

JSX에는 당연히 javascript 표현이 가능하다.

import React, { Component ,Fragment} from 'react';
 
class App extends Component {
  render() {
    const var1 = '1변수';
    const var2 = '2변수';
    const codition = true;
    
    return (
      <Fragment>
        
          <div className="App">
            {var1}
          </div>
            {codition ? '참' : '거짓'}
          <div>
            {var2}
          </div>
            {/*주석은 이렇게 !*/}
      </Fragment>
    );
  }
}
 
export default App;
 

조건부로 

{codition ? '참' : '거짓'}

codition이

true = '참'

false = '거짓'

으로 나오게 할수도 있지만

만약 true 일때만 표시하고 싶다면

&& 를 쓰면 된다.

{codition && '참' }

속성을 줄때도 동일하다

import React, { Component ,Fragment} from 'react';
 
class App extends Component {
  render() {
    const var1 = '1변수';
    const var2 = '2변수';
    const codition = true;
    const style = {
     backgroundColor : 'red' //
    }
    
    return (
      <Fragment>
        
          <div className="App">
            {var1}
          </div>
            {codition ? '참' : '거짓'}
          <div style={style}>
            {var2}
          </div>
            {/*주석은 이렇게 !*/}
      </Fragment>
    );
  }
}
 
export default App;
 

이렇게 json 형식으로 넣어주면 되지만

주의 해야 할점은 React에서 style은 

기존의 스네이크케이스 였던 방식을 카멜케이스로 넣어주어야한다.

자바스크립트의 객체 key로는 '-' 하이픈을 사용할수 없기 때문이다.

class또한 중복이 되므로 className으로 써주어야 한다.