리액트 #03 - JSX

React JS #03 - JSX 

---

리액트는 일반적인 Javascript 와는 다르게 JSX라는 템플릿을 사용한다.

꼭 필요한 건 아니지만, 많은 장점이 있다.

- JSX는 Javascript 코드로 컴파일하는 과정에서 최적화된다.

- JSX는 예측불가능한 결과를 내지 않는다. 대부분의 에러들은 컴파일과정에서 발견된다.

- HTML에 친근하여 개발이 쉽고 빠르다.

JSX 사용하기

---

JSX는 일반적인 HTML과 많이 닮았습니다. 

class App extends React.Component {

    render(){

        return (

            <div>

                <h1>Hello World!!!</h1>

            </div>

        );

    }

}

HTML과 비슷하지만, JSX를 쓰기위해선 많은 것들을 염두해두고 있어야합니다.

Nested Elements

---

많은 것들을 반환하고자 한다면, 하나의 컨테이너에 담아야 합니다.

아래에는 h1, h2, p 태그를 div라는 컨테이너에 담아서 반환합니다.

import React from 'react';

class App extends React.Component {

   render() {

      return (

         <div>

            <h1>Header</h1>

            <h2>Content</h2>

            <p>This is the content!!!</p>

         </div>

      );

   }

}

export default App;

- 실행 결과

Attributes

---

일반적인 html property에 사용하듯이 커스텀 attributes를 사용할 수 있습니다.

커스텀 속성을 사용하기 위해선, data- 라는 접두사를 사용해야 합니다.

import React from 'react';

class App extends React.Component {

   render() {

      return (

         <div>

            <h1>Header</h1>

            <h2>Content</h2>

            <p data-myattribute = "somevalue">This is the content!!!</p>

         </div>

      );

   }

}

export default App;

- 실행 결과

Javascript Expressions

---

JSX에서는 Javascript expressions을 사용할 수 있습니다.

{}로 감싸주기만 하면 됩니다.

import React from 'react';

class App extends React.Component {

   render() {

      return (

         <div>

            <h1>{1+1}</h1>

         </div>

      );

   }

}

export default App;

- 실행 화면

그런데 JSX에서는 흔히 JS에서 많이 쓰는 if else 구문을 쓸 수 없습니다.

대신 ternary expressions을 사용해야 합니다.

import React from 'react';

class App extends React.Component {

   render() {

      var i = 1;

      return (

         <div>

            <h1>{i == 1 ? 'True!' : 'False'}</h1>

         </div>

      );

   }

}

export default App;

- 실행 화면

Styling

---

리액트는 inline style을 쓰기를 지향합니다.

inline style을 쓰기위해선 camelCase 문법으로 사용해야 합니다.

import React from 'react';

class App extends React.Component {

   render() {

      var myStyle = {

         fontSize: 100,

         color: '#FF0000'

      }

      return (

         <div>

            <h1 style = {myStyle}>Header</h1>

         </div>

      );

   }

}

export default App;

- 실행 화면