여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. React - 스타일 지정
React – 스타일 지정
4개월전 작성
5개월전 수정

React

스타일 지정

React with CSS를 스타일화하는 방법에는 여러 가지가 있다.
이 튜토리얼에서는 다음 세 가지 일반적인 방법에 대해 자세히 알아보자.

  • 인라인 스타일링
  • CSS 스타일시트
  • CSS 모듈

인라인 스타일링

인라인 스타일 속성을 사용하여 요소의 스타일을 지정하려면 값이 JavaScript 객체여야 한다.

예제
const Header = () => {
  return (
    <>
      <h1 style={{color: "red"}}>Hello Style!</h1>
      <p>Add a little style!</p>
    </>
  );
}
기본 예시
예제 보기

 

⭐ JSX에서 JavaScript 표현식은 중괄호 안에 작성되며 JavaScript 객체도 중괄호를 사용하므로 위 예제의 스타일은 두 세트의 중괄호 {{}} 안에 작성된다.

camelCased 속성 이름

인라인 CSS는 JavaScript 객체로 작성되므로 background-color와 같은 하이픈 구분 기호가 있는 속성은 카멜 케이스 구문으로 작성해야 한다.

예제

background-color 대신 backgroundColor를 사용한다.

const Header = () => {
  return (
    <>
      <h1 style={{backgroundColor: "lightblue"}}>Hello Style!</h1>
      <p>Add a little style!</p>
    </>
  );
}
기본 예시
예제 보기
자바스크립트 객체

스타일 정보가 포함된 객체를 생성하고 스타일 속성에서 이를 참조할 수도 있다.

예제
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파일 확장자를 사용하여 파일을 저장하고 애플리케이션으로 가져올 수 있다.

예제 – App.css

“App.css”라는 새 파일을 만들고 여기에 CSS 코드를 삽입한다.

body {
  background-color: #282c34;
  color: white;
  padding: 40px;
  font-family: Sans-Serif;
  text-align: center;
}
예제 – index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './App.css';

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Header />);
기본 예시
예제 보기

CSS 모듈

애플리케이션에 스타일을 추가하는 또 다른 방법은 CSS 모듈을 사용하는 것이다.

CSS 모듈은 별도의 파일에 배치되는 구성 요소에 편리하다.

⭐ 모듈 내부의 CSS는 이를 가져온 구성 요소에만 사용할 수 있으며 이름 충돌에 대해 걱정할 필요가 없다.

.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;
}
예제 – Car.js

구성요소에서 스타일시트를 가져온다.

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

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

export default Car;
예제 – index.js

애플리케이션에서 구성요소를 가져온다.

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);
기본 예시
예제 보기
참고
Mingg`s Diary
밍구
공부 목적 블로그