시작..
React에서는 서로 다른 컴포넌트, CSS파일이여도 같은 클래스 이름을 사용하면 스타일링이 정상적으로 적용되지 않는다는 것을 알게 된 나는, Styled-components를 배워서 사용하고 있었다. 그러던 중, 친구와 선배가 Tailwind를 사용하는 모습을 보고 "나도 써볼까?"라는 생각이 들어, 거창하게는 아니지만 사용해 보고 현재 이 글을 쓰게 되었다.
Styled-components는 뭐임
React와 같은 자바스크립트 기반 라이브러리 or 프레임워크에서 CSS를 작성하고 관리하기 위한 라이브러리이다. 이 라이브러리는 JavaScript 내에서 CSS를 정의할 수 있도록 해주며, 이를 통해 컴포넌트 단위로 스타일을 적용할 수 있는 장점이 있다. 스타일을 별도의 CSS 파일로 작성하는 대신, 컴포넌트 자체에서 스타일을 함께 정의함으로써 코드의 가독성을 높이고 유지보수가 쉬워진다.
Styled-components의 핵심 기능은 CSS-in-JS 개념으로, 자바스크립트 파일에서 스타일을 직접 정의하고 적용하는 방식이다. 이를 통해 컴포넌트에 고유한 클래스를 자동으로 생성해 스타일 충돌을 방지한다.
주요 기능
- 동적 스타일링: 컴포넌트의
props에 따라 동적으로 스타일을 변경할 수 있다. - 자동 클래스 이름 생성: 각 스타일은 고유한 클래스 이름을 생성하므로, 스타일 중복 문제를 방지할 수 있다.
설치
(1) npm 설치 명령어
npm install styled-components
(2) Yarn 설치 명령어
yarn add styled-components코드
import styled from "styled-components";
const Button = styled.button`
background-color: ${(props) => (props.primary ? "blue" : "red")};
color: white;
border: 1px solid black;
border-radius: 5px;
display: block;
`;
function App() {
return (
<div>
<Button>Default Button</Button>
<Button primary>Primary Button</Button>
</div>
);
}
export default App;
장점
- 모듈화된 스타일링: 스타일과 컴포넌트를 한 곳에 정의하여, 유지보수가 쉽고 코드가 깔끔하다.
- 재사용 가능성: styled-components로 만들어진 컴포넌트는 재사용이 가능하며, 다양한 props를 통해 쉽게 수정할 수 있다.
단점
- JavaScript 파일에서 스타일을 정의하기 때문에, 큰 프로젝트에서는 관리가 어려울 수 있다.
- CSS와 JS를 결합하기 때문에 처음 접하는 사람에게는 생소할 수 있다.
오늘의 주인공 Tailwind...
Tailwind는 유틸리티 클래스 기반의 CSS 프레임워크로, 웹 페이지의 스타일링을 쉽게 하고, 효율적으로 만들기 위해 설계되었다. 일반적인 CSS 프레임워크와는 달리, Tailwind는 미리 정의된 개별적인 유틸리티 클래스들을 제공하여, 개발자가 HTML 요소에 직접적으로 스타일을 적용할 수 있게 한다.
주요 기능
-
유틸리티 클래스 기반: Tailwind는
text-center,bg-blue-500,p-4같은 작은 CSS 클래스들을 제공하며, 이 클래스들을 조합하여 HTML 요소에 스타일을 적용할 수 있다. -
사용자 정의 가능: Tailwind는 설정 파일(tailwind.config.js)을 통해 색상, 간격, 타이포그래피 등의 스타일을 커스터마이징할 수 있다.
-
모듈화된 스타일링: 개별 컴포넌트를 위한 CSS 클래스를 만드는 대신, Tailwind의 유틸리티 클래스를 사용하여 스타일을 빠르게 적용할 수 있다.
-
CSS 파일 크기 최적화: 최종 프로덕션에서는 사용되지 않는 CSS 클래스를 제거하여 파일 크기를 최소화할 수 있는 'PurgeCSS' 기능이 내장되어 있다.
설치
(1) npm 설치 명령어
npm install -D tailwindcss
(2) Yarn 설치 명령어
yarn add styled-componentsnpx tailwindcss init (구성 파일 생성)// tailwind.config.js에서
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}/*index.css*/
@tailwind base;
@tailwind components;
@tailwind utilities;코드
function App() {
return (
<div>
<button className="bg-red-500 text-white border border-black rounded-md py-2 px-4">
Default Button
</button>
<button className="bg-blue-500 text-white border border-black rounded-md py-2 px-4">
Primary Button
</button>
</div>
);
}
export default App;
참고용 사진이여서 위 코드와 실제 코드는 약간의 차이는 있을 수 있음
장점
-
빠른 개발 속도: 미리 정의된 유틸리티 클래스를 통해 빠르게 스타일링할 수 있어 개발 속도가 크게 향상되며, 별도의 CSS 파일을 수정하지 않고, HTML에서 직접 스타일을 적용할 수 있다.
-
일관된 디자인 유지: 유틸리티 클래스를 사용함으로써 프로젝트 전반에서 일관된 스타일을 쉽게 유지할 수 있으며, 특히 대규모 프로젝트에서 디자인 시스템을 유지하는 데 유용하다.
단점
-
HTML 코드 복잡도 증가: 스타일을 HTML에서 직접 적용하기 때문에 많은 유틸리티 클래스가 중첩되면 HTML 파일이 복잡해지고, 코드 가독성이 떨어질 수 있다.
-
초기 러닝 커브: 수많은 유틸리티 클래스를 처음부터 익히는 것이 어려울 수 있으며, 전통적인 CSS 방식에 익숙한 개발자에게는 적응하는 데 시간이 걸릴 수 있다.
그래서 뭐가 좋음?
차이점
-
스타일 작성 방식
- Styled-components: JavaScript 파일 안에서 CSS를 작성하고 컴포넌트 단위로 스타일을 관리.
- Tailwind CSS: HTML 클래스에 사전 정의된 유틸리티 클래스를 사용하여 스타일 적용.
-
동적 스타일링
- Styled-components: props를 통해 동적으로 스타일을 변경할 수 있음.
- Tailwind CSS: 고정된 유틸리티 클래스로 스타일을 적용하며, 동적 스타일링은 복잡함.
-
성능 및 파일 크기
- Styled-components: 런타임에 스타일을 생성하여 성능에 영향을 미칠 수 있음.
- Tailwind CSS: 사용하지 않는 CSS는 빌드 시 제거되어 파일 크기가 최적화됨.
뭘 써야 될까
결국 선택은 본인의 마음이지만, 무엇을 골라야 할지 모르는 사람을 위해 간단히 추천해주겠다. (사실 GPT에게 물어봤다.)
- 프로젝트가 큰 규모이고 유지보수가 중요할 때 (Styled-components)
- CSS가 컴포넌트와 함께 관리되므로 유지보수가 쉽고, CSS 중복 문제도 자동으로 해결된다.
- 동적 스타일링과 props를 통해 스타일을 쉽게 변경할 수 있다.
- 빠른 프로토타이핑과 생산성을 중요시할 때 (Tailwind)
- 사전 정의된 유틸리티 클래스를 사용해 빠르게 디자인을 구현할 수 있어, 빠른 프로토타이핑이나 작은 프로젝트에 유리하다.
- 파일 크기도 작게 유지할 수 있어 성능 최적화가 필요할 때 유리하다.
마무리
오늘은 단순한 궁금증으로 시작해 Tailwind에 대해 알아봤다. 아직 많이 사용해보지는 않았지만, 컴포넌트를 만들 때마다 파일을 연결하는 것이 귀찮았던 나에게는 혁신적인 기술이었다.
