React CSS Styling

Inline 스타일링

인라인 스타일 속성으로 요소를 스타일링하려면 값이 JavaScript 객체여야 합니다.

예제 1 - 스타일링 정보가 포함된 객체를 삽입합니다.
const Header = () => {
  return (
    <>
      <h1 style=>Hello Style!</h1>
      <p>Add a little style!</p>
    </>
  );
}

Note: JSX에서는 JavaScript 표현식은 중괄호 안에 쓰이고 JavaScript 개체도 중괄호를 사용하기 때문에 위의 예제의 스타일링은 두 개의 중괄호 세트 `````` 안에 쓰입니다.

camelCased 속성 이름

인라인 CSS는 JavaScript 객체로 작성되므로 background-color와 같이 하이픈 구분자를 사용하는 속성은 대소문자 구문을 사용하여 작성해야 합니다.

예제 2 - background-color 대신 backgroundColor를 사용합니다.
const Header = () => {
  return (
    <>
      <h1 style=>Hello Style!</h1>
      <p>Add a little style!</p>
    </>
  );
}

JavaScript 객체

스타일 정보를 사용하여 객체를 작성하고 스타일 속성에서 참조할 수도 있습니다.

예제 3 -myStyle이라는 이름의 스타일 객체를 만듭니다.
const Header = () => {
  const myStyle = {
    color: "white",
    backgroundColor: "DodgerBlue",
    padding: "10px",
    fontFamily: "Sans-Serif"
  };
  return (
    <>
      <h1 style={myStyle}>Hello Style!</h1>
      <p>Add a little style!</p>
    </>
  );
}

CSS 스타일시트

CSS 스타일링을 다른 파일에 쓰고 .css 파일 확장자로 파일을 저장한 후 응용 프로그램에 Import할 수 있습니다.

예제 4 - App.css라는 이름의 새 파일을 만들고 CSS 코드를 삽입합니다.
body {
  background-color: #282c34;
  color: white;
  padding: 40px;
  font-family: Sans-Serif;
  text-align: center;
}

원하는 대로 파일을 호출할 수 있습니다. 올바른 파일 확장자만 기억하십시오.

프로그램에 스타일시트를 Import합니다.

예제 5 - index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './App.css';

const Header = () => {
  return (
    <>
      <h1>Hello Style!</h1>
      <p>Add a little style!.</p>
    </>
  );
}

ReactDOM.render(<Header />, document.getElementById('root'));

CSS 모듈

응용 프로그램에 스타일을 추가하는 또 다른 방법은 CSS 모듈을 사용하는 것입니다.

CSS 모듈은 개별 파일에 배치되는 컴포넌트에 편리합니다.

모듈 내의 CSS는 모듈을 Import한 컴포넌트에 대해서만 사용할 수 있으므로 이름 충돌을 걱정할 필요가 없습니다.

확장자가 .module.css인 CSS 모듈을 만듭니다(예: my-style.module.css).

my-style.module.css - “my-style.module.css”라는 새 파일을 만들고 CSS 코드를 삽입합니다.
.bigblue {
  color: DodgerBlue;
  padding: 40px;
  font-family: Sans-Serif;
  text-align: center;
}

컴포넌트에 스타일시트를 import 합니다.

Car.js
import styles from './my-style.module.css'; 

const Car = () => {
  return <h1 className={styles.bigblue}>Hello Car!</h1>;
}

export default Car;

응용 프로그램의 컴포넌트를 import 합니다.

index.js
import ReactDOM from 'react-dom';
import Car from './Car.js';

ReactDOM.render(<Car />, document.getElementById('root'));