리액트로 꾸미기 - CSS Modules, TailWind CSS

1. CSS Modules
2. Styled Components
3. Emotion

...

 

React 관련 CSS 툴에는 위처럼 여러 툴이 존재

그중에서도 CSS Modules 를 가장 많이 사용한다고 함

 

CSS Modules?

기존의 css 파일의 이름을 파일명.module.css 형태로 변경해준다!

그런다음 해당 css 파일을 사용해주는 컴포넌트에

import styles from '../styles/Section.module.css';

해당 형식으로 style을 객체형태로 import 해준다.

export default function Section() {
  return (
    <>
      <div className={styles.box}>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat eaque harum necessitatibus deserunt laudantium totam eveniet, facere nobis repudiandae rem molestiae reiciendis rerum adipisci ipsum quisquam consequatur ex aspernatur veniam!</p>
        <button className={styles.btn}>버튼</button>
      </div> 
    </>
  )
}

객체므로 .을 사용하여 클래스명에 접근하여 사용해준다.

 

즉, CSS Module 은 styled component 처럼 class 명에 임의의 해쉬를 달아서 클래스명이 겹쳐서 생기는 문제를 해결해줄 수 있는 것이다!

다만 css 파일이므로 중첩은 지원하지 않으므로... scss 형식을 사용해줘야 중첩이 지원된다.

다만 styled components 처럼 props 로 값을 받아서 바로 css에 적용시키는 것은 불가능하고 미리 정의한 class명을 받아서 사용하는 것은 가능!

export default function Section({color} : {color: string}) {
  return (
    <>
      <div className={styles.box}>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat eaque harum necessitatibus deserunt laudantium totam eveniet, facere nobis repudiandae rem molestiae reiciendis rerum adipisci ipsum quisquam consequatur ex aspernatur veniam!</p>
        <button className={styles[color]}>버튼</button>
      </div> 
    </>
  )
}

 

 

CSS Module 의 특징

• 기존의 CSS의 class 이름이 겹쳐서 생기는 문제를 해결 -> 클래스명 뒤에 고유한 Hash 를 붙여줌, id를 사용해줄 필요가 없어짐
• Node-sass 를 설치하면 중첩이 가능
• Props 또는 변수를 통하여 디자인 변경이 가능 -> 다만 이미 class 가 정의되어야 함

 

 

TailWind CSS

https://tailwindcss.com/

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

 

npm install -D tailwindcss postcss autoprefixer

// create react app 으로 만들어진 리액트App의 경우 PostCSS 속성을 덮어쓸 수 없도록 하므로 해당 모듈도 설치필요
npm i @craco/craco

 

테일윈드 세팅하기

npx tailwindcss init

tailwind.config.js 파일이 생성된다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

// 위 파일을 아래처럼 수정
module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
   darkMode: false, // or 'media' or 'class'
   theme: {
     extend: {},
   },
   variants: {
     extend: {},
   },
   plugins: [],
 }

그리고 craco.config.js 파일을 만들어서 추가해준다

module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

 

 

테일윈드를 적용하려면?

tailwind 를 사용하는 리액트App 최상위 css파일에

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

해당 코드를 추가하면 설정과 적용 끝!

 

추가적으로 테일윈드를 클래스명으로 바로 사용하기 위해 확장 프로그램이 존재함

 

 

---

SVG 로고 삽입해보기

https://heroicons.com/

Heroicons

위의 사이트는 테일윈드 사용 시 바로 적용이 가능한 SVG 아이콘을 제공함

svg 태그 안의 className 으로 조정해주면 된다.

 

자세한 사용법은 직접 사용해보고 나중에 정리해볼 요량이다.