JSX문법 정리(2)

최근에 일이 많아서 리액트 공부를 소홀히 했던거 같다. 이제는 조금 안정이 되었으니 다시 리액트 공부를 한 뒤 기록에 남기고자 한다.

1. 인라인 스타일링

리액트에서 DOM 요소에 스타일을 적용할 때에는 문자열 형태로 넣는 것이 아니라 객체 형태로 넣어주어야 한다.

이때는 background-color 속성처럼 단어와 단어 사이에 '-'로 이어져 있는경우 '-'를 제외하고 카멜 케이스로 작성한다 ex) backgroundColor

import "./App.css";
import { Fragment } from "react";

function App() {
  const styleCss = {
    backgroundColor: "black",
    color: "aqua",
    fontSize: "48px",
    fontWeight: "bold",
    padding: 16,
  };
  return (
    <>
      <div style={styleCss}>styled component</div>
    </>
  );
}

export default App;

바로 스타일 값을 지정하고 싶은 경우에는 다음과 같이 코드를 작성한다.

import "./App.css";
import { Fragment } from "react";

function App() {
  return (
    <>
      <div
        style={{
          backgroundColor: "black",
          color: "aqua",
          fontSize: "48px",
          fontWeight: "bold",
          padding: 16,
        }}
      >
        styled component
      </div>
    </>
  );
}

export default App;

2.class 대신 className으로 class 지정

HTML에서 CSS 클래스를 사용할 경우 다음과 같이 코드를 작성한다

<div class="myClass"></div>

하지만 JSX에서는 class가 아닌 className으로 작성한다

src/App.css

.react {
  background-color: aqua;
  color: black;
  font-size: 48px;
  font-weight: bold;
  padding: 16px;
}

src/App.js

import "./App.css";
import { Fragment } from "react";

function App() {
  return (
    <>
      <div className="react">className</div>
    </>
  );
}

export default App;