[React] JSX 기본 문법 (3/3)

CSS 적용 방법 (1)

import React, { Component, Fragment } from "react";

class App extends Component {
  render() {
    const style = {
      backgroundColor : 'black',
      padding : '16px',
      color : 'white',
      fontSize : '36px'
    };
    return (
      <div style = {style}>
        안녕하세요!
      </div>
    );
  }
}

export default App;

* 위와 같이 출력이 됩니다

---

CSS 적용 방법 (2)

import React, { Component, Fragment } from "react";
import './App.css';

class App extends Component {
  render() {
    return <div className = "App">안녕하세요!</div>;
  }
}

export default App;

* 위와 같이 출력이 됩니다.

---

주석

import React, { Component, Fragment } from "react";
import './App.css';

class App extends Component {
  render() {
    return (
      <div>
        {/* 멀티라인 주석 완전 가능 */}
        <h1 // 주석 괄호 안에 몰래 주석 가능
        >리엑트</h1>
      </div>
    )
  }
}

export default App;

{/* 멀티라인 주석 완전 가능 */} 

이런 식으로 {  } 사이에 /* */ 를 넣어서 사용함