옹 부트스트랩이 다운 횟수는 많지만 만족도가 적대

리액트에서 많이 쓰이는 CSS들

딱히 전용 CSS는 없다 원탑도 없고

공통적으로 많이 쓰이는 것은 createreactapp

package.json에 기본적으로 들어있는

postcss

tailwindcss

sass-loader

PostCSS

• 동일한 네임의 셀렉터를 사용하면 나중에 작성된게 이김 덮어씌워짐

사용법

Button1.css 파일명이면 Button1.module.css 로 변경 하면 사용할 수 있다.

import React from "react";
import styles from "./Button1.module.css";

export default function Button1() {
  return <button className={styles.button}>Button1</button>;
}

⇒ 외부의 이름 충돌을 걱정하지 않아도됨

알아서 이렇게 Button1 2로 나누어짐

포스트css를 쓰면 모듈 별로, 파일 별로 관리를 해줌

클래스 이름을 직관적으로 사용할 수 있음

Styled Components

자바 스크립트 파일 안에서 css 문법을 쓸 수 있는 라이브러리 중 가장 인기 있는

yarn add styled-components 터미널에서 해당 명령어를 입력해 설치해주어야함

만약 오류가 뜨면

yarn add react-is 설치 (원래 같이 되는 거래)

사용해보기

import "./App.css";
import Button1 from "./components/Button1";
import Button2 from "./components/Button2";
import { styled, css } from "styled-components";

const Container = styled.div`
  display: flex;
`;

const Button = styled.button`
  background: transparent;
  border-radius: 3px;
  border: 2px solid #3c5b69;
  color: #b9eaff;
  margin: 0 1em;
  padding: 0.25em 1em;
  ${(props) =>
    props.primary &&
    css`
      background: #009cd5;
      color: white;
    `};
`;

function App() {
  return (
    <>
      <Button1 />
      <Button2 />
      <Container>
        <Button>Normal Button</Button>
        <Button primary>Primary Button</Button>
      </Container>
    </>
  );
}

export default App;

Tailwind

html을 떠나지 않고 모던한 웹사이트를 만들 수 있는 라이브러리

부트스트랩과 같이 모든 컴포넌트를 제공하지는 않고 가벼운 유틸리티

ㅇㅎ rounded라고 쓰면이미 둥글게 만들어주는 css가 적용이 되고 이런 식

설치하기

yarn add -D tailwindcss

npx tailwindcss init

• index.css에 아래 3줄 추가

@tailwind base;
@tailwind components;
@tailwind utilities;

전격비교! 장단점

CSS Module

Styled Components

Tailwind

주관적인 의견 (선호도)

뭔가를 빠르게 만들어야할 땐 tailwind 강추

난잡해보이고 유지보수가 떨어지는 단점 있지만 내가 고민하면 된대

Tailwind 함께 공부하기

https://tailwindcss.com/

사이트 내에 템플릿도 있음 검색도 가능