[2] JSX 기본 문법

CSS Style과 Class를 사용하는 방법

const에 style을 정의해줄 수 있슴당.

1. 보통의 CSS에서는 '-' 를 사용해 띄워줬지만 js에서는 Camel Case를 사용해용

요런 식 입니다.

background-color => backgroundColor

font-size => fontSize

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

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

export default App;

2. Class (X), ClassName (O)

"./App.css"

.App {
  background: black;
  color: aqua;
  font-size: 36px;
  padding: 1rem;
  font-weight: 600;
}

"./App.js"

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
          something="somesome" // 주석을 달아주세용
        > 
          안녕하세용!
        </h1>
      </div>
    );
  }
}

export default App;