이번 챕터에서는 스타일을 적용하는 여러가지 방법들을 소개해주고 어떻게 적용하는지 알려준다.
Global styles
지금 회사에서도 간간히 웹 작업을 하기 때문에(pure js..., css, html) 이 global css라는 것이 이렇게 쉽게 적용된다는게 사실 좀 놀라웠다.
import '@/app/ui/global.css';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}위와 같이 RootLayout에 import로 적용을 해주면 끝이다.
이 프로젝트에서는 /app 밑에 있는 layout.tsx이다.
Tailwind
Tailwind는 내가 공부할 때도 있었던 패키지였는데, 공식페이지의 튜토리얼에도 나오는것을 보면, 굉장히 유명해진 것 같다. 갑자기 왜 Tailwind를 얘기하는가 라 하면
방금 적용한 /app/ui/global.css를 열어보자
@tailwind base;
@tailwind components;
@tailwind utilities;
input[type='number'] {
-moz-appearance: textfield;
appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type='number']::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}이렇게 구성되어 있다.
tailwind는 css framwork로 아래처럼 쓰면 css가 적용된다.
<h1 className="text-blue-500">I'm blue!</h1>(파란색이 된다고 한다.)
이 섹션의 중간을 보면
Although the CSS styles are shared globally, each class is singularly applied to each element. This means if you add or delete an element, you don't have to worry about maintaining separate stylesheets, style collisions, or the size of your CSS bundle growing as your application scales.
이런 글이 있는데 무슨뜻인가 궁금해서 찾아보니, 보통 예전의 css의 경우에는
.main {
font-size: 15px
}
.content {
font-size: 13px
}
.notice {
font-size: 18px
}
...이런식으로 쭉 썼을 것이다. 그러다보니 사용하지 않는 클래스들에 대하여 가끔 충돌이 나거나, css번들 크기가 커지거나 이런일이 발생하는데, tailwind의 경우에는 사용하지 않는 class들은 css파일이 만들어 질 때 포함되지 않는다고 한다.
이것때문에 동적으로 생성된 태그들은 포함이 안되는 문제도 있다고 한다. 이걸 막기위한 방법도 있다고 하니 궁금하신 분들은 찾아보자
CSS Modules
반가운 이름이다.
CSS Modules은 오래된 웹페이지에서 사용하는 css처럼 사용하면 되는데, 다른점이라고 한다면, 자동으로 고유한 클래스 이름을 생성하여 컴포넌트에 CSS를 지역 범위로 제한하여 스타일 충돌이 일어나지 않는다.
이게 무슨소리냐 인가 하면
.title {
font-size: 18px;
color: red;
}.title {
font-size: 12x;
color: blue
}한페이지에서 css파일을 여러개 사용하면 위와같은 경우 나중에 써진 css가 적용되어 스타일 충돌이 일어나지만, 후술할 것 처럼 css module을 사용하면, 똑같은 title이라 작성하여도 고유한 클래스 이름으로 바뀌어 적용되기 때문에 스타일 충돌이 일어나지 않는다는 뜻이다.
// home.module.css
.title {
font-size: 12x;
color: blue
}import styles from '@/app/ui/home.module.css';
<div className={styles.title} />;이런식으로 import하여 사용하면 된다.
Clsx
웹작업을 하시는 분들이라면 가끔이 아니라 매우 자주, 특정 조건에 따라 다른 스타일이 적용되어야 하는 경우가 있다는 것을 아실것이다.
이 챕터에서는 clsx라는 라이브러리를 소개해주고 있는데 사용법은 다음과 같다.
import clsx from 'clsx';
export default function InvoiceStatus({ status }: { status: string }) {
return (
<span
className={clsx(
'inline-flex items-center rounded-full px-2 py-1 text-sm',
{
'bg-gray-100 text-gray-500': status === 'pending',
'bg-green-500 text-white': status === 'paid',
},
)}
>
// ...
)} InvoiceStauts라는 컴포넌트는 string 타입의 status를 파라미터?로 받는다는 뜻 같다.
여기서 clsx가 하는 역할은 status가 'pending'이면 'bg-gray-100 text-gray-500'를
'paid'면 'bg-green-500 text-white'를 적용하는 역할이다.
오랜만에 공부를 하니까 재밌긴한데, 아예 react로 전향할지는 참 고민이 많이 된다. 경력인정도 인정이지만 참.. 하던걸 내려놓고 다른걸 하기가 쉽지 않다.
아무튼 오늘은 여기까지 할 것 같다.
