들어가며
이 포스팅에서는 React를 주로 사용하는 프론트엔드 개발자 대상으로 작성했으며 tailwind의 주요 컨셉과 장점, 설치방법, 다른 css 프레임워크와 비교된 사용 방법에 대해 다룹니다.
Tailwind: 만족도 1위 Css 프레임 워크
tailwind는 2017년 11월에 출시한 css 프레임워크다. 사용량은 부트스트랩이 현저하게 높지만 몇 년 사이에 바로 치고 올라온 모습을 볼 수 있다. 특히 다른 프레임워크보다 만족도가 현저하게 높다. 사진에는 짤려서 나오지 않지만 부트스트랩은 만족도 9위이다. 과연 대체 다른 프레임 워크랑 얼마나 다르길래 만족도가 높은 것일까?
Tailwind 주요 컨셉: Utility Class
tailwind는 유틸리티 지향하여 유틸리티 클래스를 사용한다.
<div class="p-6 flex md:text-bold hover:text-red-100">
</div>tailwind는 클래스에 따라 이미 css값이 정해져있다. p-6 에는 padding: 1.5rem; 값이 저장되어있다. flex 에는 display:flex; 값이 저장되어있다. 인라인 코드와 다르게 가상 선택자나 미디어 쿼리도 md: ,hover: 같은 접두어를 붙이면 바로 사용할 수 있다.
Tailwind의 장단점
Now I know what you’re thinking, “this is an atrocity, what a horrible mess!”
and you’re right, it’s kind of ugly.
이제 당신이 무슨 생각을 하는지 알겠어요. "이건 잔혹행위야, 정말 끔찍한 난장판이야!" 그리고 당신 말이 맞아요. 그건 좀 추해요.
-tailwindcss공식문서-
단점1 추한 코드이다. 위의 예시 코드만 봐도 알 수 있다. 공식문서도 못생겼다고 인정한다.
하지만 이 추함에서 얻을 수 있는 장점들이 무척 편하다.
장점1 클래스 이름을 짓기 위해 시간 낭비를 하지 않는다. OpenBtnWrapper나 open-btn-wrapper같은 클래스명을 만드는 것을 매번 고민하지 않아도된다.
장점2 개발자가 직접 Css 파일을 생성할 필요가 없다. html에 클래스명을 적기만하면 tailwind Css가 알아서 필요한 클래스만 사용한 css 파일을 만들어준다.
장점3 Css를 변경할 때 더 안전하다. 기본적으로 css는 전역적으로 사용된다. app.css에 div {margin:0} 과 같은 속성을 넣는다면 하위에 모든 div요소에 적용된다. tailwind는 파생되는 문제를 걱정하지 않고 내용을 변경할 수있다.
[React에서 Css 적용 방법 비교] 1.PureCss
예를 들어 위와 같은 카드 컴포넌트를 만든다면 쳐보자. 위 사진은 부트스트랩에서 가져온 사진이다.
import React from "react";
import "./Test.css"
const Cardtest = () => {
return (
<div class="card">
<img class="card-img-top" src="holder.js/100px180" />
<div class="card-body">
<div class="card-title h5">Card Title</div>
<p class="card-text">
Some quick example text to build on the card title and make
up the bulk of the card's content.
</p>
<button type="button" class="btn btn-primary">
Go somewhere
</button>
</div>
</div>
);
};
export default Cardtest;//Test.css
.card {
width: 18rem;
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0,0,0,.125);
border-radius: .25rem;
}
.card-img, .card-img-top {
// some style
}
.card-body {
// some style
}
.card-title {
// some style
}
.btn-primary {
// some style
}
.btn {
// some style
}가장 순수한 방법이다. 컴포넌트에는 html 요소만 넣고 css 파일을 따로 만들어서 컴포넌트에 import 시킨다. 단점은 컴포넌트 당 css 파일을 -만들어야 한다는 점에서 있다.
[React에서 Css 적용 방법 비교] 2.BootStrap
import React from 'react'
import Card from "react-bootstrap/Card";
import Button from "react-bootstrap/Button";
const Cardtest = () => {
return (
<Card style={{ width: "18rem" }}>
<Card.Img variant="top" src="holder.js/100px180" />
<Card.Body>
<Card.Title>Card Title</Card.Title>
<Card.Text>
Some quick example text to build on the card title and make
up the bulk of the card's content.
</Card.Text>
<Button variant="primary">Go somewhere</Button>
</Card.Body>
</Card>
);
}
export default Cardtest;Bootstrap을 사용한다면 매번 Css파일을 생성하지 않아도된다! 하지만 단점은 유연하지 않다. 지정된 디자인을 바꾸려면 그때부터 코드가 복잡해진다.
// 배경 색상 변경
<Card style={{ width: "24rem", backgroundColor:"black"}}>
// 폰트 사이즈 변경
<Card style={{ width: "24rem", backgroundColor:"black", fontSize:"18px"}}> 이런 식으로 인라인 속성으로 css값을 넣어여한다. 문제는 이런 식으로 코드를 작성하면 나중에 유지보수하기 힘들기 때문이다.
모든 요소에 스타일을 넣어야해서 나중에 코드를 보면 스타일 코드만 반 이상을 차지한다. 원하는 정보를 빠르게 알기 어렵다. 인라인 속성이 css 파일보다 우선 순위가 높아 의도치 않게 속성을 덮어씌우는 경우가 발생한다. 또 hover:나 active 같은 가상 선택자는 사용할 수 없어서 불편하다.
[React에서 Css 적용 방법 비교] 3.StyledComponet(CSS in Js)
import React from "react";
import styled from "styled-components";
const Cardtest = () => {
return (
<CardWrappDiv style="width: 18rem;" class="card">
<CardImg class="card-img-top" src="holder.js/100px180" />
<CardBodyDiv class="card-body">
<div class="card-title h5">Card Title</div>
<p class="card-text">
Some quick example text to build on the card title and make
up the bulk of the card's content.
</p>
<button type="button" class="btn btn-primary">
Go somewhere
</button>
</CardBodyDiv>
</CardWrappDiv>
);
};
export default Cardtest ;
const CardWrappDiv = styled.div`
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0, 0, 0, 0.125);
border-radius: 0.25rem;
`
const CardImg = styled.img`
// some style
`
const CardBodyDiv = styled.div`
// some style
`;Styled Component는 BootStrap과 Tailwind와 같은 Css 프레임워크가 아니다. CSS-in-JS로 CSS를 자바스크립트 코드에 통합하는 데 도움이 되는 라이브러리다.
장점은 Tailwind처럼 격리된 스타일 제공, prop로 가변 스타일링 제공 등이 있다. 단점은 렌더링 되는 시점에 스타일 코드가 추가되어 css 파일 캐시가 불가능하고, 매번 컴포넌트 네이밍을 해줘야한다.
[React에서 Css 적용 방법 비교] 4.Tailwind
import React from "react";
const Cardtest = () => {
return (
<div class="w-16 flex flex-col bg-white border rounded">
<img class="absolute top-0" src="holder.js/100px180" />
<div class="flex p-4">
<div class="mb-4">Card Title</div>
<p class="card-text">
Some quick example text to build on the card title and make
up the bulk of the card's content.
</p>
<button
type="button"
class="text-black text-center cursor-pointer border p-4 text-basd rounded transition leading-3"
>
Go somewhere
</button>
</div>
</div>
);
};
export default Cardtest;Tailwind는 다른 라이브러리를 import 하지 않는다. 또 HTML에서 벗어나지 않고 스타일을 제공해준다!
Tailwind 설치 및 사용 방법
1.Tailwind 설치
npm install -D tailwindcss
npx tailwindcss init2. tailwind.config.js 설정
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}3. CSS에 Tailwind 지시문 추가
@tailwind base;
@tailwind components;
@tailwind utilities;4. Tailwind CLI 빌드 프로세스 시작
(cmd)
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch5.에디터 설정
Vscode Extenstion을 설치해준다.
클래스명을 다 외울 필요없이 자동완성으로 사용할 수 있다.
참고 자료
CSS-Tailwind
'FrontEnd' 카테고리의 다른 글
| [React🍇] axios interceptors typescript로 설정하기 (0) | 2022.08.29 |
|---|---|
| [JS📜] 크롬확장프로그램 i18n 국제화 하는 방법 (0) | 2022.08.17 |
| [JS📜] 자바스크립트의 시간은 브라우저마다 다르다 (0) | 2022.08.14 |
| [라이브러리] Mock Service Worker 시작하기 (0) | 2022.08.13 |
| [React📜] 로그인 회원가입 유효성 검사기능 구현 3가지 (0) | 2022.08.12 |