부트캠프 수강도 마지막을 달리고 있다.
여느 학교의 수업들처럼, 끝나고나면 배운 것도 없이 몇 달이 훌쩍 지난 것 같다는 생각이 든다.
(진짜 배운 게 없다는 건 아니다. 실제로 많은 걸 가르쳐주셨고, 매우 유용했지만, 내가 잘 체득한 건지 모르겠다.)
이 블로그에 글을 쓰면서, 이제서야 느낀 건데 이때까진 배운 내용의 외전 같은 느낌으로 배운 내용 외에 궁금한 내용을 알아보는 글을 썼었는데(남들 눈엔 어떻게 보였는지 몰라도, 일단 나는 그런 의도로 작성했다...) 배운 내용을 우선적으로 정리하는 게 중요하다는 생각을 했다.
오늘은 스타일을 적용하는 여러 방법에 대해 배웠다.
1. CSS Module
서로 다른 JSX 파일 내에서 중복되는 클래스 명이 있는데, 두 컴포넌트 사이의 관계가 부모-자식일 때, 의도치 않게 같은 스타일이 적용될 수 있다. 그럴 때 클래스 명을 다르게 적용하지 않고, CSS module을 사용할 수 있다. 확장자를 .css가 아닌 .module.css 로 하여 import 하면 클래스 명마다 고유 문자열이 붙어 중복되지 않는다.
// StyledContainer.jsx
import ChildContainer from "./ChildContainer";
import "./styled-container.css";
export default function StyledContainer() {
return (
<div>
<h1 className="title">Parent Title</h1>
<ChildContainer></ChildContainer>
</div>
);
}// ChildContainer.jsx
import "./child-container.css";
export default function ChildContainer() {
return (
<article>
<h2 className="title">Child Title</h2>
<p className="content">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsa, fuga consequuntur vel nobis voluptatum qui iste recusandae quis? Explicabo et odio rem beatae tempora inventore molestias sequi at temporibus ea.</p>
</article>
);
}/* style-container.css */
.title {
font-size: 2.5rem;
color: palevioletred;
}/* child-container.css */
.title {
font-size: 1.5rem;
color: lightsalmon;
}
.content {
width: 320px;
}
부모 컴포넌트에 적용하려고 했던 CSS가 자식 컴포넌트의 우선순위에 밀려 의도치 않은 결과를 내고 말았다.
이 때 쓸 수 있는 것이 CSS Module이다. 각 CSS 파일의 내용을 바꾸지 않고 확장자만 .module.css로 변경했다.
// StyleComponent.jsx
import ChildContainer from "./ChildContainer";
import styles from "./styled-container.module.css";
export default function StyledContainer() {
return (
<div>
<h1 className={styles.title}>Parent Title</h1>
<ChildContainer></ChildContainer>
</div>
);
}// ChildContainer.jsx
import styles from "./child-container.module.css";
export default function ChildContainer() {
return (
<article>
<h2 className={styles.title}>Child Title</h2>
<p className={styles.content}>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsa, fuga consequuntur vel nobis voluptatum qui iste recusandae quis? Explicabo et odio rem beatae tempora inventore molestias sequi at temporibus ea.</p>
</article>
);
}
참고로 가져온 styles를 출력해보면 다음과 같이 나온다.
2. UI 프레임워크
화면 상에 보이는 디자인과 UX를 일관되게 유지해주고 효율적으로 제작할 수 있도록 하는 도구이다.
다음은 Material UI 공식 사이트에 나온 해당 프레임워크의 장점이다.
- CSS 작업보다 비즈니스 로직 작성에 집중할 수 있음
- 직관적이고 광범위한 커스텀이 가능
- 워크플로우의 간소화
- 개발자와 디자이너 간의 일관성을 높임
- 거대한 커뮤니티를 가지고 있고, 그만큼의 지원을 기대할 수 있음
import * as React from "react";
import Button from "@mui/material/Button";
export default function ButtonUsage() {
return <Button variant="contained">Hello world</Button>;
}
Ant Design의 경우 해당 문서에서 예시를 찾아볼 수 있다.
TailwindCSS의 경우 HTML 클래스 속성에 Tailwind에서 미리 지정한 클래스 명을 사용하여 스타일을 적용할 수 있다.
Tailwind를 React에 적용하는 방법은 다음과 같다.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
# Tailwind CSS를 설치한다.
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
// 확장자가 .js, .ts, .jsx, .tsx인 경우 tailwind css가 적용됨을 알린다.
@tailwind base;
@tailwind components;
@tailwind utilities;
/* CSS에 Tailwind directive를 추가 */
export default function App() {
return (
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
)
}
// text의 size가 3xl이고 굵은 폰트, 밑줄 효과를 준다는 것을 알 수 있다.
3. Styled Component
JSX 파일 내에서 변수에 스타일을 입혀, 컴포넌트로서 사용이 가능하다.
개인적으로, Styled Component를 중점으로 배웠지만, '일반 컴포넌트와 구별하기 힘듦' 이라는 단점때문에 프로젝트를 하게 된다면 Styled Component보다 Tailwind를 사용하지 않을까싶다.
#엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript
