Skip to content

2. JSX.md

Latest commit

 

History

History
140 lines (111 loc) · 3.63 KB

2. JSX.md

File metadata and controls

140 lines (111 loc) · 3.63 KB
Raw

JSX

  • JSX는 JS 확장 문법으로 XML과 매우 비슷하게 생겼다. (JS + XML)
  • 나중에 코드가 번들링(bundling) 되면서 JS로 반환된다.
var jsx = (
  <div>
    <h1> HelloWorld!! </h1>
  </div>
)

바벨로 변환 후

var jsx = React.createElement(
  "div",
  null,
  React.createElement(
    "h1",
    null,
    "HelloWorld!!"
  )
);
  • 컴포넌트를 트리 구조의 객체로 정의할 수 있다.
  • JSX는 리액트용이기 때문에 공식 JS 문법은 아니다.
  • 바벨이 이를 변환해 주기는 하지만, 바벨에서 여러 문법을 지원할 수 있도록 preset 설정한다.
  • ES6에는 babel-preset-se2015를 적용하며, JSX를 지원하려고 babel-preset-react를 적용하는 것이다.
  • 아직 공식적으로 릴리스한 것은 아니지만 차기 문법은 ES2016(ES7)문법들도 preset들을 받아서 사용할 수 있다.

문법

  • 컴포넌트에 여러 요소가 있다면 부모 요소 하나로 꼭 감싸야 한다.
  • 이것은 Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 DOM 트리 구조 하나여야 한다는 규칙이 있다.

Fragment

  • 리액트 v16이상에서는 Fragment 컴포넌트가 도입이 되었다.
  • div 같은 것으로 감싸지 않고 여러 요소를 렌더링하고 싶다면 리액트를 불러올 때 Component와 함께 Fragment를 불러온다.
import React, { Component, Fragment } from 'react';

class App extends Component {
  render() {
    return (
      <Fragment>
        <h1>Hello</h1>
        <h2>World!!</h2>
      </Fragment>
    );
  }
}
  • Fragment 대신 <></> 사용해도 같은 기능을 보여준다.
import React from 'react';

class App extends Component {
  render() {
    return (
      <>
        <h1>Hello</h1>
        <h2>World!!</h2>
      </>
    );
  }
}

JS expression

  • {} 를 사용하면 JS 문법을 사용할 수 있다.
import React, { Component, Fragment } from 'react';

class App extends Component {
  render() {
    const text = "wow~~~";
    return (
      <Fragment>
        <h1>Hello</h1>
        <h2>World!!{text}</h2>
      </Fragment>
    );
  }
}

if문

  • JSX 내부의 JS 표션시에서 if문을 사용할 수 없다.
  • 다른것을 렌더링할 때는 JSX밖에서 if문을 사용하여 작업하거나,
  • { } 안에(JS expression) 조건부 (삼항) 연산자를 사용하면 된다.
import React, { Component, Fragment } from 'react';

class App extends Component {
 render() {
    const text = "wow~~~";
    const condition = true;
    return (
      <Fragment>
        <h1>Hello</h1>
        <h2>World!!{text}</h2>
        { condition ? "ok" : "nope" }
      </Fragment>
    );
 }
}

&& 조건부 렌더링

  • 단순히 특정 조건을 만족할 때는 보여주고, 만족하지 않을때는 보여 주고 싶지 않다면 null, false 값을 렌더링하면 아무것도 나타나지 않는다.
{ condition && "show me the money" }

인라인 스타일링

  • 리액에서 DOM 요소에 스타일을 적용할 때는 문자열 형태로 적용할 수 없다.
  • 그 대신 CSS 스타일을 JS 객체 형식으로 적용 해야 한다.
  • key 는 camelCase로 작성해야 한다.
  • JS 객체 key에서는 '-' 를 사용 할 수 없으므로, background-color는 backgroundColor로 바꾸어 작성한다.
    • -mos : Mos
    • -webkit : Webkit
    • -ms : ms

className

  • 리액트에서 class를 설정할 때는 class키워드 대신 className으로 설정해야 한다.