Style 적용

기존 스타일 적용 방법

// 인라인 방식
<div style="color:red;"> 색상 </red>

// 클래스 접근 방식
.colorRed { color:red; }
<div class="colorRed"> 색상 </red>

리액트에서 스타일 적용 방법

// 인라인 방식
<div style= { {backgroundColor: "red"} } > 색상 </red>

// 클래스 접근 방식
.colorRed { backgroundColor:red; }
<div className="colorRed"> 색상 </red>

리액트 스타일 적용 예시

// 인라인 방식
import React, {useState} from 'react';
import logo from './logo.svg';
import './App.css';

function App() {

  let [num,setNum] = useState(1);

  return (
    <div className="App">
      <header className="App-header">
        <div style={ {color : "red"}}>{num}</div>
      </header>
    </div>
  );
}

export default App;

// 클래스 접근 방식
[App.css]
.number{
  color : red;
}

[App.js]
import React, {useState} from 'react';
import logo from './logo.svg';
import './App.css';

function App() {

  let [num,setNum] = useState(1);

  return (
    <div className="App">
      <header className="App-header">
        <div className="number">{num}</div>
      </header>
    </div>
  );
}

export default App;

참고 영상

https://www.youtube.com/watch?v=lKYp2QQFYK4