24.08.14 day46 CSS 적용 방식

리액트에서 CSS를 적용하는 방식에는 여러 가지가 있으며, 각 방식들은 프로젝트의 필요에 따라 선택할 수 있고 스타일을 관리하는 방식에 따라 다를 수 있다.

 

주요 방식

기본 CSS 파일 사용

리액트에서 가장 기본적인 방법은 일반적인 HTML과 마찬가지로 외부 CSS 파일을 사용하는 것이다. 이 방법은 모든 컴포넌트에서 동일한 CSS 파일을 공유할 수 있다.

// App.js
import React from "react";
import "./App.css"; // CSS 파일을 임포트

function App() {
  return (
    <div className="App">
      <h1>Hello, React!</h1>
    </div>
  );
}

export default App;

==================
/* App.css */
.App {
  text-align: center;
}

h1 {
  color: blue;
}

 

CSS Modules

CSS Modules는 리액트에서 컴포넌트 단위로 스타일을 관리하는 방법이며, 클래스 이름 충돌을 방지하기 위해 각 CSS 클래스는 해당 컴포넌트에만 적용된다.

// App.module.css
.app {
  text-align: center;
}

.title {
  color: blue;
}

===========================
// App.js
import React from "react";
import styles from "./App.module.css"; // 모듈화된 CSS를 임포트

function App() {
  return (
    <div className={styles.app}>
      <h1 className={styles.title}>Hello, React with CSS Modules!</h1>
    </div>
  );
}

export default App;

이 경우 App.module.css 파일에서 정의된 클래스들은 styles.app과 styles.title처럼 사용되고, 이로 인해 클래스 이름이 고유해져 다른 스타일과 충돌할 가능성이 줄어든다.

 

Styled Components (CSS-in-JS)

Styled Components는 리액트에서 CSS-in-JS 방식을 사용하는 라이브러리이다. 이 방법은 자바스크립트 파일 내에서 스타일을 작성하고, 컴포넌트와 스타일을 하나의 단위로 결합할 수 있다.

// App.js
import React from "react";
import styled from "styled-components";

function App() {
  return (
    <div>
      <Title>Hello, React with Styled Components!</Title>
    </div>
  );
}

export default App;

const Title = styled.h1`
  color: blue;
  text-align: center;
`;

styled-components를 사용하면 스타일을 컴포넌트 단위로 관리할 수 있고, 동적 스타일링도 가능하여 매우 유연하다.

 

Inline Styles

리액트에서는 JSX에서 직접 인라인 스타일을 적용할 수도 있는데, 이 방식은 자바스크립트 객체로 스타일을 정의하는 방식이다.

function App() {
  const headingStyle = {
    color: 'blue',
    textAlign: 'center'
  };

  return (
    <div>
      <h1 style={headingStyle}>Hello, React with Inline Styles!</h1>
    </div>
  );
}

export default App;

인라인 스타일은 매우 간단하지만, 복잡한 스타일을 관리하기에는 부적합할 수 있다.

 

Sass

Sass같은 CSS 전처리기를 리액트 프로젝트에 통합할 수도 있다. 이런 전처리기는 CSS 작성에 변수를 사용할 수 있게 하며, 코드의 재사용성을 높여준다.

// App.js
import React from "react";
import "./App.scss"; // SCSS 파일을 임포트

function App() {
  return (
    <div className="App">
      <h1>Hello, React with Sass!</h1>
    </div>
  );
}

export default App;

============================
// App.scss
$app-color: blue;

.App {
  text-align: center;
  
  h1 {
    color: $app-color;
  }
}

Sass를 이용하면 중첩 스타일링이나 변수 사용 등의 기능을 활용할 수 있어 편리하다.

 

Tailwind CSS 또는 Bootstrap

Tailwind CSS, Bootstrap 같은 CSS 프레임워크를 리액트에서 사용할 수도 있으며, 이 프레임워크들은 미리 정의된 클래스를 활용하여 빠르게 UI를 구성할 수 있게 도와준다.

// App.js
import React from "react";
import './tailwind.css';

function App() {
  return (
    <div className="text-center">
      <h1 className="text-blue-500">Hello, React with Tailwind CSS!</h1>
    </div>
  );
}

export default App;

이처럼 프레임워크를 활용하면 CSS를 직접 작성하는 대신 미리 만들어진 클래스를 사용하는 방식으로 스타일을 적용할 수 있다.

 

리액트에서 CSS를 적용하는 방법은 프로젝트의 규모, 복잡성, 스타일 관리 방식에 따라 다양한 선택지가 있으며, CSS 파일을 단순히 가져오는 방식부터 모듈화, 인라인 스타일링, CSS-in-JS, 전처리기, 프레임워크 사용까지 여러 방법을 조합하여 사용할 수 있으니 상황에 맞는 적절한 방식을 선택하는 것이 중요하다.

 

본인은 styled-components 방식이 편하고 css 찾기가 수월해 제일 많이 사용하는 것 같다. 최근에는 scss 방식과 섞어서 css가 좀 많아질 것 같으면 scss파일로 css를 적용시키고 짧은 코드의 컴포넌트에는 styled-components를 사용하고 있다.