[리액트] 컴포넌트 스타일링

River Moon·2023년 8월 14일

프론트엔드 - 리액트

목록 보기

12/21

리액트에서 컴포넌트의 스타일링은 중요한 작업 중 하나이다. 다양한 방법으로 스타일을 적용할 수 있으며, 각 방법은 다음과 같다.

1. Inline style

Inline style은 객체 형태로 스타일을 정의하고, 컴포넌트의 style 속성에 전달하는 방법이다. 이 방법은 간편하게 스타일을 적용할 수 있으나, 복잡한 스타일링에는 제한적일 수 있다. 그리고 inline style은 보기 안좋다..

const style = {
  color: 'blue',
  fontSize: '16px'
};

function MyComponent() {
  return <div style={style}>Hello, World!</div>;
}

2. className

전통적인 CSS 파일을 사용하고 싶다면 className 속성을 활용해야 한다. CSS 클래스를 정의하고, 해당 클래스 이름을 컴포넌트에 할당하면 된다. className만 CamelCase 뿐이지 일반 HTML class를 작성하는 방법은 똑같다.

.my-class {
  color: red;
}

// JS
function MyComponent() {
  return <div className="my-class">Hello, World!</div>;
}

3. CSS Modules

CSS Modules는 클래스 이름의 중복을 막기 위한 기술이다. 웹팩이나 기타 빌드 도구와 함께 사용되는 CSS 처리 방식 중 하나이다. 이 기술은 전역 범위의 CSS 클래스 이름 충돌을 방지하며, 각 컴포넌트별로 독립적인 스타일을 정의할 수 있게 해준다. CSS 파일을 모듈처럼 불러와 컴포넌트에 적용할 수 있다.

1. 작성 방법

CSS Modules를 사용하려면 .module.css 확장자를 사용해야 한다. 클래스 이름을 작성할 때는 일반 CSS와 동일하나, 해당 CSS 파일을 자바스크립트로 불러올 때 모듈처럼 사용한다.

/* style.module.css */
.myClass {
  color: green;
}

// JS
import styles from './style.module.css';

function MyComponent() {
  return <div className={styles.myClass}>Hello, World!</div>;
}

2. 성능과 유지 보수

CSS Modules는 개발 시에만 로컬 스코핑이 적용되므로 런타임 성능에 영향을 주지 않는다. 또한 컴포넌트별로 독립적인 스타일을 관리할 수 있어 유지 보수가 용이하다.

3. 로컬 스코핑 (Local Scoping)

전통적인 CSS에서는 클래스 이름이 전역 범위에 정의되어, 이름 충돌이 일어날 수 있다. CSS Modules는 이 문제를 해결하기 위해 클래스 이름을 로컬 스코핑하며, 각 컴포넌트가 고유한 스타일을 가질 수 있게 해준다. 그래서 클래스네임을 신경써서 짓지 않아도 된다.

CSS에서 로컬 스코핑이란, 특정 컴포넌트 또는 모듈 내에서만 유효한 스타일 클래스 이름을 정의하는 것을 의미한다. 이로 인해 같은 클래스 이름을 여러 컴포넌트에서 사용해도 서로 영향을 주지 않는다.
예를 들어:

// 컴포넌트 A의 스타일
.button {
  color: red;
}

// 컴포넌트 B의 스타일
.button {
  color: blue;
}

정상적으로 일반 css인 경우 같은 페이지에서 두 컴포넌트가 공존 한다면 클래스 네임 충돌하여 예상치 못한 결과를 초래할 수 있다.

CSS Modules를 사용하면 작성할 땐.button이지만 개발자 도구로 해당 컴포넌트의 요소를 보면

컴포넌트 A 클래스 네임은 _button_7oxvs_33 컴포넌트 B는 _button_7oxvs_53 이런 식으로 유니크한 클래스 네임을 새롭게 만들어줘서 중복되지 못하도록 한다.

CSS Modules는 SCSS 도 사용할수 있다. 같이 사용하면 엄청 편해지는걸 채감할수 있다.

4. CSS in JS

CSS in JS는 스타일을 자바스크립트 내에서 작성하는 패러다임이다. 여러 라이브러리가 이 방식을 지원하며, JS와 CSS의 경계를 허문다.

styled-components (라이브러리)

import styled from 'styled-components';

const MyDiv = styled.div`
  color: orange;
`;

function MyComponent() {
  return <MyDiv>Hello, World!</MyDiv>;
}