[React] React의 Styling

Vanilla Styling

import './Header.css';

장단점

장점

• CSS 코드는 JSX 코드에서 분리됨
• CSS 코드를 작성할 수 있음
• 다른 사람이 해당 코드에 작업할 수 있고, 다른 사람이 스타일링을 한다고 해도 방해나 간섭을 받지 않고 컴포넌트에 작업을 할 수 있음

단점

• CSS를 알아야 함
• 범위지정이 되어있지 않아서 다른 컴포넌트 간에 스타일 충돌이 일어날 수 있음

Inline Styling

<p style={{ color: 'red', textAlign: 'left'}}>Hello World!</p>

장단점

장점

• 쉽고 빠르게 추가할 수 있음
• 추가하는 요소에만 영향을 미침
• 동적으로 스타일링 하는 것이 쉬움

단점

• 모든 요소를 개별적으로 스타일 해야 함
• CSS와 JSX 코드 사이의 구분이 없어 스타일 작업을 할 때 방해나 간섭을 받음

CSS Module

장단점

장점

• CSS 코드는 JSX 코드에서 분리됨
• CSS 코드를 작성할 수 있음
• 다른 사람이 해당 코드에 작업할 수 있고, 다른 사람이 스타일링을 한다고 해도 방해나 간섭을 받지 않고 컴포넌트에 작업을 할 수 있음
• 범위 지정을 하여 특정 컴포넌트에만 적용할 수 있음

단점

• CSS를 알아야 함
• 특정 CSS 파일에는 코드가 많이 없을 수도 있음

Styled Components

npm install styled-components

import { styled } from 'styled-components'

장단점

장점

• 상대적으로 쉽고 빠르게 추가 가능함
• 최종적으로 구성 가능한 스타일 함수와 함께 작업하기 때문에 리액트 내부에서 생각하면 됨
• 스타일이 자동적으로 범위 지정이 됨

단점

• CSS를 알아야 함
• CSS 코드와 JSX 코드가 강하게 분리되지 않음
• 비교적 작은 wrapper 컴포넌트가 많이 생기는 경향이 있음

styled-components

styled-components

Tailwind CSS

장단점

장점

• CSS를 몰라도 사용할 수 있음
• 스타일 겹침을 피할 수 있음
• 높은 수준의 개인설정 및 맞춤화, 추가설정 기능을 가져 선호에 맞게 설정할 수 있음

단점

• 상대적으로 긴 클래스 이름을 가짐
• CSS 코드와 JSX 코드가 분리되지 않음
• 상대적으로 작은 wrapper 구성 요소가 많아지거나, 복사 및 붙여넣기가 많이 발생함

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

 

출처: [Udemy] React 완벽 가이드 with Redux, Next.js, TypeScript