JSX

Pros

  • JSX는 컴파일링 되면서 최적화 되므로, 빠르다.
  • Type-safe 하여 컴파일링 과정에서 에러를 감지 할 수 있다.
  • HTML에 익숙하다면, JSX를 사용하여 쉽고 빠르게 템플릿 작성이 가능하다.

app.js

import React form 'react';

class App extends React.Component {
    render() {

        return (
            <h1>Hello World</h1>
        );
    }
}

export default App;
  • import 는 ES6에 도입된 문법으로 var React = require('react'); 와 같다. React 모듈은 Component를 만들때 사용된다.
  • class 도 ES6 에 도입된 요소 중 하나이다. 모든 Component 는 React.Component 를 상속한다. ES5 환경에서는 React.createClass() 라는 메소드를 사용한다.
  • render() 메소드에서는 Component 에 렌더링 될 데이터를 정의 한다.
  • 자바스크립트에서 html 태그를 반환하는데, React JSX 는 XML-like syntax 를 native javascript 로 변환한다. 따라서, ““로 감싸지 않는다. () 를 사용하지 않아도 오류는 발생하지 않지만 가독성을 위하여 사용한다.
  • JSX 파일의 확장자는 이전에는 .jsx 확장자를 사용하였지만 현재 .js 를 사용하는 추세로 전환되고 있다.

JSX vs JS

class Hello extends React.Component {
    render() {
        return <div>Hello {this.props.name}</div>;
    }
}

ReactDOM.render(
    <Hello name="World" />,
    document.getElementById('container')
);

class Hello extends React.Component {
    render() {
        return React.createElement("div", null, "Hello ", this.props.name);
    }
}

ReactDOM.render(
    React.createElement(Hello, {name: "World"}),
    document.getElementById('container')
);

Nested Elements

  • 컴포넌트에서 여러 element를 렌더링 해야 할 때, 그 element 들은 container element 안에 포함 시켜야 한다.
  • 아래와 같이 코드를 작성하면 오류가 발생한다.
return  (
        <h1> Hello World</h1>
        <h2> Welcome </h2>
    );
  • div element 를 wrapper로 사용하면 오류가 발생하지 않는다.
return  (
        <div>
            <h1> Hello World </h1>
            <h2> Welcome </h2>
        </div>
);

Javascript Expression

  • JSX 안에서, javascript 표현을 사용하는 방법은 {} 로 wrapping 하면 된다.
render(){
    let text = "Web"
    return  (
        <div>
            <h1> Hello World </h1>
            <h2> Welcome to {text}</h2>
        </div>
    );
}
  • ES6에 도입된 let 키워드는 var 과 비슷하지만 var 변수의 scope은 함수 범위인데 let 은 블럭 범위이다. ES6 에서는 let 을 주로 사용하고, var 는 필요한 상황에서만 사용하는게 좋다.
  • {text} 를 사용하여 text javascript 변수를 렌더링 한다.

Create method

sayHey(){
   alert("hey");
}

render(){
    let text = "Web"
    return  (
        <div>
            <h1> Hello World </h1>
            <h2> Welcome to {text}</h2>
            <button onClick={this.sayHey}>Click Me</button>
        </div>
    );
}
  • {this.sayHey} 를 통하여 버튼이 클릭되면 해당 메소드가 실행된다.

if-else

  • JSX 안에서 사용되는 javascript 표현에는 if-else 문을 사용 할 수 없다.
  • ternary 표현은 가능하다. condition ? true : false

Inline style

  • React 의 Inline style 에서는, string 형식이 사용되지 않고 key 가 camelCase 인 object 가 사용된다.
render(){
    let text = "Web";

    let pStyle = {
        color: 'aqua',
        backgroundColor: 'black'
    };

    return  (
        <div>
            <h1> Hello Velopert </h1>
            <h2> Welcome to {text}</h2>
            <button onClick= {this.sayHey}>Click Me</button>
            <p style = {pStyle}>{1 == 1 ? 'True' : 'False'}</p>
        </div>
    );
}
  • pStyle 이 p element에 적용된다.

Comment

  • JSX 안에서 주석을 작성하려면, `{/* comments */ } 형식으로 작성한다.
  • container element 안에 주석이 작성되어야 한다.

Naming Convention

  • React Component 는 첫 문자가 대문자인 PascalCase 로 작성된다.