리액트 내부에서 CSS사용법

🦊 각 함수내에서 CSS설정(리턴 위)

import React from 'react';

function App() {
  const name = 'hihi'
  const style = {
    backgroundColor: 'black',
    color: 'aqua'
  }
  return <div style={style}>{name}</div>
}

export default App;

🦊 리턴내부에서 인라인으로 쓰기

import React from 'react';

function App() {
  const name = 'hihi'
  const style = {
  }
  return (<div
    style={{
      backgroundColor: 'black',
      color: 'aqua'}
    }
  >{name}</div>)
}

export default App;

🦊 CSS파일 사용하기

//App.js
import React from 'react';
import './App.css'

function App() {
  const name = 'hihi'
  return <div className="react">{name}</div>
}

export default App;

//App.css
.react {
    background: aqua;
    color: black;
    font-size: 48px;
}