[ReactJS] 1. styled-components 사용 이유

리액트 컴포넌트 스타일링 방법들

1. Inline style

가장 간단하고 쉬운 방법으로 리액트 컴포넌트에 직접 스타일을 적용
HTML 엘리먼트의 style 속성을 이용

import React from 'react';

const Box = () => {
  return <div style={{width: '200px', height: '200px', backgroundColor: 'teal'}}>...</div>;
};

export default App;

2. css/scss

외부 스타일 시트 파일을 리액트 컴포넌트에서 불러와서 스타일을 적용

// styles.css

.box {
  width: '200px';
  height: '200px';
  backgroundColor: 'teal';
}

import React from 'react';
import './styles.css'

const Box = () => {
  return <div className="box">...</div>;
};

export default Box;

3. css Module

css를 모듈화 하여 사용하는 방식. css 파일을 불러올 때 고유한 클래스명을 만들어서 클래스명이 중첩되는 현상을 방지

// box.module.css

.box {
  width: '200px';
  height: '200px';
  backgroundColor: 'teal';
}

import React from 'react';
import styles from './box.module.css'

const Box = () => {
  return <div className={styles.box}>...</div>;
};

export default Box;

문제점?

• inline style => :hover과 같은 의사 클래스를 사용하지 못하고 지속/확장 가능하지 않기 때문에 권장X
• css/scss => css파일의 코드들이 애플리케이션 전체에 적용 ➡ 전역적으로 css를 적용하게 되면 유지 관리와 사용하기가 어려움(전역 네임스페이스)
• css Module => className만으로는 동적인 스타일링을 구현하기 어려움

CSS-in-JS

JavaScript를 사용하여 스타일을 지정하는 방법으로 스타일을 구성 요소 수준으로 추상화합니다(+ CSS는 스타일을 문서 수준으로 적용).

ReactJS를 사용해 웹을 개발하면 Component 단위로 만들어 조합하여 웹 페이지를 구성합니다. JavaScript 환경을 최대한 활용하며 컴포넌트 레벨로 추상화하기에 여러 장점이 있습니다.

styled-components

styled-components는 리액트 컴포넌트에 스타일을 효율적으로 작성하기 위한 대표적인 CSS-in-JS 라이브러리 중 하나입니다. 애니메이션, 테마, 전역 스타일링, props 기반의 동적 스타일링 등 여러 강력한 기능들을 제공합니다.
다크모드와 상태변화에 따른 동적 스타일링을 효율적으로 작성하기 위해 styled-components 라이브러리를 사용하여 앞으로의 프로젝트를 진행합니다.

styled-components 를 사용하는 8가지 이유 -번역

▶ 가장 인기 있는 CSS-in-JS 라이브러리 (23. 1. 17 기준) Link

Reference

• React 컴포넌트 CSS 스타일링 기본
• styled-components: Documentation
• 스타일 라이브러리 | 야무의 React 러닝 가이드