React 인라인 스타일

인라인 스타일은 HTML에서 태그 안에 스타일 속성을 추가할 때 사용했다

마찬가지로 리액트에서 컴포넌트/일반 태그 안에 스타일 속성을 줄 수 있다

단, JSX 문법에 의해서 HTML에 적용하던 방법과는 다르다

• style에 대한 value는 객체 형태이다
• CSS 속성 이름은 카멜 케이스로 한다

import React from "react";
import MyHeader from "./MyHeader";

function App() {
  let name = "리액트"

  const style = {
    App: {
      backgroundColor: "black",
    },
    h1: {
      color: "red",
    },
    bold_text: {
      color: "green",
    }
  }
  return (
    <div style={style.App}>
      <MyHeader/>
        <h1 style={style.h1}>안녕 {name}</h1>
        <b style={style.bold_text}>React.js</b>
    </div>
  );
}

export default App;

로 쓸 수 있다

인라인 스타일의 문제점

• {} === {} 는 false이기 때문에, 리렌더링시에 인라인 스타일이 적용된 컴포넌트 / 일반태그가 다르다고 판단하여 돔을 새로 그리게 되어 불필요한 리로딩이 발생
• style 속성의 재사용성이 떨어짐