CSS-in-CSS(CSS 모듈) / CSS-in-JS(Styled Component)

moontag·2022년 6월 30일
BEMCSSSasscddstyled component
0

React

목록 보기
6/10

🎁 정리

CSS-in-CSS

  • css 전처리기(sass,scss), css 모듈, css 프레임워크(tailwind, bootstrap 등)

장점

  • 빌드타임에서 CSS가 변환되므로 렌더링 시 추가 구문분석 필요없음
  • css 모듈에서 클래스명이 고유해짐으로 클래스명 중복 문제 해결함
  • css 파일이 따로 되어있어서 분업에 용이함

단점

  • 많은 각 CSS파일 유지보수 관리해야함

CSS-in-JS

  • styled-components, emotion 등

장점

  • 컴포넌트화 해서 추상화
  • 클래스명 작성 안해도 자동 생성해줘서 코드 경량화, 코드 가독성 좋음
  • JS 상태를 CSS에서 사용 가능
  • 현재 사용 중인 스타일만 DOM으로 출력됨

단점

  • 느린 인터랙션 - 상대적으로 CSS 모듈보다 느림. 렌더링마다 JS 안 CSS 로딩,파싱해야해서 속도가 느림
  • 라이브러리 설치해야하므로 번들 크기가 커짐

🎀 추천 🎀

  • 동적인 페이지면 CSS-in-CSS 사용
  • 정적인 페이지면 CSS-in-JS 사용





CDD

Component Driven Development : 컴포넌트 기반 개발

  • 상향식 개발
    컴포넌트 단위로 만들어서 페이지를 레고처럼 조립하는 개발 방식

  • 재사용 가능한 UI 컴포넌트
    디자인, 개발단계에서부터 재사용 가능한 UI 컴포넌트를 고안한다면,
    이후에도 새롭게 만드는 것이 아닌, 재사용할 수 있게 된다.

  • CDD 방법으로 UI 구축한 사이트 : BBC, UN







CSS 작성 방식의 발전

사진출처

특징장점단점
CSS기본적 스타일링 방법-일관된 패턴 갖기 어려움, !important의 남용
SASS (preprocessor)프로그래밍 방법론을 도입하여 컴파일된 CSS를 만들어내는 전처리기변수/함수/상속 개념으로 재사용 가능, CSS의 구조화전처리 과정이 필요, 디버깅의 어려움, 컴파일한 CSS 파일이 커짐
BEMCSS 클래스명 작성에 일관된 패턴을 강제하는 방법론네이민으로 문제 해결, 전처리 과정 불필요선택자 이름의 장황, 클래스 목록이 많아짐
Styled-Component (CSS-in-JS)컴포넌트 기반으로 CSS 작성하도록 돕는 라이브러리CSS를 컴포넌트 안으로 캡슐화, 네이밍과 최적화를 신경 안써도 됨빠른 페이지 로드에 불리





CSS 전처리기(CSS Preprocessor) 란?

다양한 디스플레이에 맞는 css와 팀원간 협업을 위해서 일관된 CSS 패턴이 필요했다. 이를 해결하기 위해 CSS 전처리기 개념이 등장했다.
예) sass, less, stylus ...

  • 전처리기에 맞는 컴파일러를 사용해야 함
  • 컴파일하면 CSS문서로 변환 됨
  • 프로그래밍 개념(변수, 함수, 상속 등)을 활용하여 반복 작업, 늘어나는 css문서 양으로 인한 유지관리의 문제점 해결

1. SASS (CSS Preprocessor)

SASS (Syntactically Awesome Style Sheets) : CSS를 확장해 주는 스크립팅 언어

  • css 속성(color, margin, width 등) 값을 변수로 선언하여 사용
    반복되는 코드를 선언하여 재사용이 가능

  • SASS는 SCSS 코드를 전처리한 후, 컴파일하여 전역 CSS 번들 파일을 만드는 전처리기 역할 수행.

<문제점>

  • CSS 구조화라는 장점보다 문제점이 더 많음.
  • 컴파일된 CSS 용량이 너무 커져버림
    전처리기의 내부작업을 모르고, 스타일이 겹치는 문제해결을 위해 계층구조를 만드는 것에 의지하여서 컴파일된 CSS 용량이 너무 커져버리게 됐다.





위의 CSS 전처리기의 문제점 보완하기 위해
BEM, OOCSS, SMACSS 같은 CSS 방법론이 등장

<방법론들의 공통점>

  • 코드의 재사용
  • 코드의 간결화(유지 보수 용이)
  • 코드의 확장성
  • 코드의 예측성(클래스 명으로 의미 예측)

2. BEM (CSS 방법론 등장)

Block, Element, Modifier로 구분하여 클래스명을 작성하는 방법

.header__navigation--navi-text {
	color: red;
}
/* header     = Block : 전체를 감싸고 있는 블럭 요소 */
/* navigation = Element : 블럭이 포함하는 한 조각 */
/* navi-text  = Modifier : 블럭 또는 요소의 속성 */
  • Block, Element, Modifier 각각은 —와 __로 구분
  • 재사용 가능하도록 HTML/CSS/SASS 파일에서도 일관된 코딩 구조 따름

<문제점>

  • 클래스명 선택자 장황으로 마크업이 불필요하게 커짐
  • 재사용 시 모든 UI 컴포넌트를 명시적으로 확장해야 함
  • 언어 로직 상 캡슐화 부재(encapsulation : 객체의 속성과 행위를 하나로 묶고 실제 구현 내용 일부를 외부에 감추어 은닉하는 개념)





3. CSS Module

CSS를 모듈화해서 사용하는 방식

  • SASS, BEM의 클래스명 겹치는 단점을 보완함.
    CSS 선택자에 고유 해시 문자열 추가하여 속성 안겹치게 함
  • 파일명.module.css 생성하여 사용하기 (scss, sass도 사용가능)
/* index.module.css */
#button {
	color: red;
	font-size: 10px;
}

#container {
	margin: 20px;
}
// App.js
import styles from "./styles.module.css";

function App() {
	return (
		<div id={styles.container}>
			<button className={styles.button}>버튼</button>
		</div>
	);
}

export default App;





4. Styled-Component (CSS-in-JS 대표)

React에서 사용 가능한 라이브러리

  • HTML, JS, CSS를 한 파일에서 모두 작성 가능

컴포넌트 개발에서 캡슐화의 중요성이 드러났고, CSS도 컴포넌트 영역으로 오기 위해 CSS-in-JS가 등장했으며 인기 라이브러리가 Styled-Component다.


1) Setting

  1. 설치

    # with npm
$ npm install --save styled-components

# with yarn
$ yarn add styled-components

  2. package.json에 추가하는 것을 권장
    여러 버전의 Styled Components가 설치되어 발생하는 문제를 줄여줌

    // package.json
{
  "resolutions": {
    "styled-components": "^5"
  }
}

  3. import 하기

    import styled from "styled-components"



2) 문법

1. 컴포넌트 만들기

  • Templete Literals 문법 사용
const 컴포넌트명 = styled.태그명`
	color : white;
`
import styled from "styled-components";

//Styled Components로 button 컴포넌트 생성
const BlueButton = styled.button`
  background-color: blue;
  color: white;
`;

export default function App() {
  // React 컴포넌트를 사용하듯이 사용
  return <BlueButton>Blue Button</BlueButton>;
}

2. 컴포넌트 재사용하기

const 컴포넌트명 = styled.(재사용할 컴포넌트명)`
	color : red;
`
import styled from "styled-components";

const BlueButton = styled.button`
  background-color: blue;
  color: white;
`;

//만들어진 컴포넌트를 재사용
const BigBlueButton = styled(BlueButton)`
  padding: 10px;
  margin-top: 10px;
`;

export default function App() {
  return (
    <>
      <BlueButton>Blue Button</BlueButton>
      <br />
      <BigBlueButton>Big Blue Button</BigBlueButton>
    </>
  );
}

3. Props 활용하기

  • class명 고민할 필요 없음

  1. Props 값으로 조건부 렌더링하기

    const Button = styled.button`
    background : ${(props) => props.color ? props.color:"white"}
	// 밑처럼 JS코드 || 활용 가능
	background: ${(props) => props.color || "white"}; 
`;

export default function App() {
return (
	<>
    <Button color="pink">Button2</Button>
  </>
)}



4. 전역 스타일 설정하기

  • import 하기
import { createGlobalStyle } from "styled-components";
  • 함수로 CSS 스타일 작성
const GlobalStyle = createGlobalStyle`
	button {
	padding : 5px;
    margin : 2px;
    border-radius : 5px;
	}
`
  • 해당함수 최상위 컴포넌트에서 사용
function App() {
	return (
		<>
			<GlobalStyle />
			<Button>전역 스타일 적용하기</Button>
		</>
	);
}




* hover 시 속성 적용하기




참고

profile
moontag
터벅터벅 나의 개발 일상
이전 포스트

React - Hooks

다음 포스트

useRef

0개의 댓글