#11 CSS used in React

2023.04.12

1. PostCSS

✔ 외부의 이름 충돌을 걱정하지 않고 해당 component의 클래스 이름을 작성하면 PostCss가 컴포넌트 이름과 고유한 id를 붙여줌
✔ 파일별로 모듈성이 부여

1. PostCSS 사용하기

css 파일 확장자를 '이름.module.css'로 지음

2. Button1.module.css / Button2.moddule.css

/*Button1.module.css*/
.button {
	background-color:pink;
}

/*Button2.module.css*/
.button {
	background-color:orange;
}

3. Button1.jsx / Button2.jsx

// Button1.jsx
import React from 'react';
import styles from './Button1.module.css';

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

// Button2.jsx
import React from 'react';
import styles from './Button2.module.css';

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

2. Styled Components

✔ 자바스크립트에서 css를 사용하게 해주는 자바스크립트 라이브러리임
✔ css파일을 만들지 않고 JS안에서 해결 가능

1. Styled Components 사용하기

설치 yarn add styled-components
react-is 오류 발생시 yarn add react-is

2. Button.js

import './Button.css';
import Button1 from './components/Button1';
import Button2 from './components/Button2';
import styled, {css} from 'styled-components';
// `css 내용 작성`
const Container = styled.div`
	display: flex;
`;
const Button = styled.button`
	background:transparent;
	border-radius:2px;
	color:black;
	${(props)=>
	  props.primary &&
      css`
		background:gray;
		color:white;
	  `};
`;
function Button(){
  return(
    <>
    	<Button1/>
    	<Button2/>
    	<Container>
    		<Button>Button</Button>
    		<Button primary>Primary Button</Button>
    	</Container>
    </>
  );
}

3. Tailwind

✔ 자바스크립트에서 css를 사용하게 해주는 자바스크립트 라이브러리임
✔ css파일을 만들지 않고 JS안에서 해결 가능
https://tailwindcss.com/

1. Tailwind 사용하기

설치 yarn add -D tailwindcss -> npx tailwindcss init

2. Tailwind.config.js에 context 변경

@type {import('tailwindcss').Config}
module.exports = {
  context: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme:{
    extend:{},
  },
  plugins: [],
};

3. index.css에 내용 추가

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

4. Tailwind CSS IntelliSense 확장 설치

5. TailwindComponent.jsx

import React from 'react';

export default function TailwindComponent(){
  return <div>
    // className으로 바로 styling 가능
    <h1 className='text-8xl'>hi</h1>
  	// button의 backgroundcolor: red + 300으로 진하게
    // button 둥글고-크게
  	// button 패딩은 x축으로 2
  	<button className='bg-red-300 rounded-lg px-2'>Button</button>
  </div>;
}

4. PostCSS vs Styled Components vs Tailwind

	PostCSS	Styled Components	Tailwind
성능	Pure CSS	CSS in JS 성능에 좋지않음(재컴파일)	Pure CSS 미리 정해진 클래스 이름들을 조립 (사용법을 익혀야함)
활용성	어디든 사용가능	React React-Native	어디든 사용가능
강점	고립성/독립성 순수CSS	고립성/독립성 JS를 통한 편의성 -> but 로직과 스타일이 엉킬 수 있음	잘 정의된 디자인 시스템 클래스 이름 창작의 괴로움 해결 태그와 스타일을 함께 쓸 수 있음 -> but 난잡해 보일 수 있음