React- React에서 인라인 스타일 사용하기

리액트에서 컴포넌트 스타일을 적용하는 여러 가지 방법중

인라인 스타일(Inline Style)을 사용하는 방법을 알아보자.

---

인라인 스타일 (Inline Style)

인라인 스타일은 컴포넌트의 style 속성에 직접 스타일 객체를 전달하는 방식ㅇ이다.

리액트에서는 style 속성에 객체(Object) 형태로 스타일을 적용해야 한다.

원래는 다음과 같이 HTML 방식을 사용했었다.

function InlineStyleExample() {
  return (
    <div>
      {/* HTML 방식 (잘못된 코드*/}
      <h1 style="color:red; font-size:20px">안녕하세요</h1>
    </div>
  )
}

export default InlineStyleExample

하지만 리액트에서는 문자열 (" " 안에 스타일을 작성)로 인라인 스타일을 적용할 수 없다.

결국 다음과 같이 오류가 발생한다.

그렇다면 React 방식 (객체 사용)은 어떤 모습일까?

다음 코드는 객체를 사용하여 스타일을 적용하였다.

function InlineStyleExample() {
  return (
    <div>
      {/* HTML 방식 (잘못된 코드*/}
      {/* <h1 style="color:red; font-size:20px">안녕하세요</h1> */}

      {/* React 방식 (객체 사용) */}
      <h1 style={{ color: "red", fontSize: "20px" }}>안녕하세요</h1>
    </div>
  )
}

export default InlineStyleExample

 

※ 인라인 스타일을 사용할 때의 주의점

1. 하이픈(-) 대신 카멜 케이스(camelCase)를 사용해야한다.
   ❌ background-color: "red"
   ✅ backgroundColor: "red"
2. 문자열 단위(px, %, em등)는 반드시 문자열(" ")로 작성해야한다.
   ❌ width: 50%
   ✅ width: "50%"
   ※ style 객체에서는 기본적으로 숫자 값을 사용하면 자동으로 px 단위 적용됨 - ex) fontSize: 20 -> (20px)
   단 % 같은 단위는 반드시 문자열 작성
3. 너무 많은 스타일을 인라인으로 사용하면 유지보수가 어렵다.
   -> CSS 파일, CSS Modules, style컴포넌트 등을 고려하는 것이 좋다

다음과 같이 위 사항들을 고려하여 작성된 인라인 스타일을 적용한다.

function InlineStyleExample2() {
  return (
    <div>
      <h2 style={{ color: "blue", fontSize: '24px', fontWeight: "bold" }}>
        인라인 스타일 적용 예제
      </h2>
      <button style={{ backgroundColor: "black", color: "white", padding: "10px" }}>
        버튼
      </button>
    </div>
  )
}

export default InlineStyleExample2

---

스타일 객체를 변수로 따로 분리해서 사용하기

컴포넌트 안에서 style 객체를 변수로 따로 선언해서 사용할 수도 있다.

function InlineStyleWithObject() {

  const titleStyle = {
    color: "purple",
    fontSize: "26px",
    textAligin: "center",
  }

  const buttonStyle = {
    backgroundColor: "green",
    color: "white",
    padding: "10px, 20px",
    borderRadius: "5px",
    border: "none",
    cursor: "pointer"
  }
  return (
    <div>
      <h2 style={titleStyle}>스타일 객체로 적용하기</h2>
      <button style={buttonStyle}>스타일 적용된 버튼</button>
    </div>
  )
}
export default InlineStyleWithObject

 

이 방식을 사용하면 코드를 재사용하기 편리하다.

---

동적으로 스타일 변경하기 - useState

useState를 사용하여 버튼을 클릭하면

색상이 변경되는 스타일을 적용할 수도 있다.

import { useState } from "react"

function DynamicStyle() {
  const [clicked, setClicked] = useState(0);

  const boxStyle = {
    width: "200px",
    height: "100px",
    backgroundColor: clicked ? "orange" : "grey",
    color: "white",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    fontSize: "20px",
    cursor: "pointer",
  }
  return (
    <>
      <div style={boxStyle} onClick={() => setClicked(!clicked)}>
        {clicked ? "클릭됨" : "클릭하세요"}
      </div>
    </>
  )
}

export default DynamicStyle

이렇게 state를 활용하여 동적인 스타일 변경도 가능하다.

---

조건부 스타일 사용 ( ? : 연산자)

&& , ? : 연산자를 사용하여 조건에 따라 다른 스타일을 적용할 수 있다.

import { useState } from "react"

function ConditionalStyle() {
  const [isActive, setIsActive] = useState(false)
  return (
    <div>
      <button onClick={() => setIsActive(!isActive)}
        style={{
          backgroundColor: isActive ? "blue" : "red",
          color: "white",
          padding: "10px 20px",
          border: "none",
          cursor: "pointer",
        }}
      >
        {isActive ? "활성화됨" : "비활성화됨"}
      </button>
    </div>
  )
}

export default ConditionalStyle

---

이렇게, 인라인 스타일은 빠르게 스타일을 적용할 때 유용하지만

유지보스 측면에서 한계가 있다.

실무에서는 보통 CSS 파일, CSS 모듈, style컴포넌트, 테일윈드 등을 더 많이 사용하는데

주로 CSS 파일을 임포트해서 className을 이용해 스타일을 적용하거나

아니면 테일윈드 모듈을 설치해서 사용하는 방식.

이 두 가지 중 HTML에서 CSS 파일로 연결해 스타일링 했던 것이 더 익숙하므로

CSS 파일을 사용하는 방식에 대해 알아보자

---

React 에서 일반 CSS 파일 사용하는 방법

우선 CSS 파일을 생성하는건 HTML과 방식은 똑같다.

그런 다음 컴포넌트에서 import 하고

마지막으로 HTML 태그의 className 속성을 이용해 스타일링 한다.

원래 HTML 에서는 "class = example" 이런식으로 클래스를 불러와 사용했지만

리액트에서는 className 속성을 사용한다.

다음 예제를 살펴보자

/* App.css */
.container {
  text-align: center;
  padding: 20px;
  background-color: #f0f0f0;
}

.title {
  color: blue;
  font-size: 24px;
  font-weight: bold;
}

.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.button:hover {
  background-color: darkblue;
}

// App.jsx

import "./App.css" // css 파일 import

function App() {
  return (
    <div className="container">
      <h2 className="title">일반 CSS 파일 적용</h2>
      <button className="button">버튼</button>
    </div>
  )
}
export default App

위와 같이 className을 이용하여 스타일을 적용 시키고

CSS 파일을 import 하여 불러온 다옴 적용 시키면 다음과 같이 결과를 얻을 수 있다

---

여러 개의 CSS 파일을 컴포넌트별로 분리해서 사용하기

다음과 같이 CSS 파일을 컴포넌트마다 분리하여 관리할 수도 있다.

/* Header.css */
.header {
  background-color: black;
  color: white;
  padding: 15px;
  text-align: center;
  font-size: 20px;
}

// Header.jsx

import "./Header.css"; // 개별 CSS 파일 import

function Header() {
  return <header className="header">헤더 영역</header>;
}

export default Header;

// App.jsx

import "./App.css" // css 파일 import
import Header from "./Header" // 헤더 컴포넌트 import

function App() {
  return (
    <div className="container">
      <Header /> {/* Header 컴포넌트 */}
      <h2 className="title">일반 CSS 파일 적용</h2>
      <button className="button">버튼</button>
    </div>
  )
}
export default App

이렇게하면 Header.jsx는 헤더 영역을 위한 별도의 스타일을 Header.css에서 관리하고

App.jsx에서 전체적인 스타일은 App.css에서 관리하므로

CSS 파일을 컴포넌트별로 나누어지니 유지보수가 쉬워진다.

---

여러 개의 클래스를 동적으로 추가하기

리액트에서는 className에 여러 개의 클래스를 동시에 적용할 수도 있다.

다음 예제를 살펴보자

/* Button.css */
.button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.primary {
  background-color: yellow;
  color: black;
}

.secondary {
  background-color: green;
  color: black;
}

// Button.jsx

import "./Button.css" // Button css파일 import

function ButtonCustom({ type }) { // type props 설정
  return (
    <>
      <button className={
        `button ${type === "primary" ? "primary" : "secondary"}`}>
        커스텀 버튼
      </button>
    </>
  )
}

export default ButtonCustom

// App.jsx

import "./App.css" // css 파일 import
import Header from "./Header" // 헤더 컴포넌트 import
import ButtonCustom from "./Button" // Button.jsx import

function App() {
  return (
    <div className="container">
      <Header /> {/* Header 컴포넌트 */}
      <h2 className="title">일반 CSS 파일 적용</h2>
      <button className="button">버튼</button>
      <ButtonCustom type="primary" /> {/* type이라는 props를 받아서 스타일 결정 (type이 primary이면 button primary 클래스 추가) */}
      <ButtonCustom type="secondary" /> {/* type이라는 props를 받아서 스타일 결정 (그 외의 경우 button secondary 클래스 추가) */}
    </div>
  )
}
export default App

위와 같이 type이라는 props값에 따라 버튼의 스타일을 다르게 적용하였으며

className을 조건부 (? :)로 적용하여 동적으로 클래스를 변경할 수 있다.

참고로 주의할 점은 CSS 파일을 import 할 때 상대경로를 꼭 확인해야한다.

import "./styles.css";  // 현재 폴더의 styles.css 가져오기
import "../styles.css"; // 상위 폴더의 styles.css 가져오기

또한,  className으로 사용한다.

<h2 className="title">제목</h2> // 올바른 사용
<h2 class = "title">제목</h2> // 잘못된 사용