[React] 리액트 기초부터(3)

react 스타일 적용하는 방법

 

1. 객체 형태로 넣어준다.

2. 카멜케이스로 적용한다.

import React, { Component } 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;

 

JSX 클래스를 사용하여 스타일 적용하는 방법

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

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

export default App;



//App.css

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

 

주석 적는 방법

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

class App extends Component {
  render() {
    return (
      <div>
      {/*주석적는 방법*/}
        <h1 
        something="abcd"//이건 주석 이렇게 적어
        >리액트</h1>
      </div>
    );
  }
}

export default App;

 

 

*이 글은 누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌를 토대로 공부를 하며 작성하였습니다.