스타일 관리의 시작

프론트엔드에서 Component Style 관리에 있어 많은 유행과 방식이 있지만, 정의하는 위치와 방식에 따라 구분된다.

inCSS vs CSSinJS

IN CSS

Css안에서 스타일을 정의하는 것을 말합니다.
전통적인 CSS를 말한다.

장점

1. 브라우저 랜더링이 빠르다.
2. 가볍기 때문에 빠르게 작업하는 것이 가능하다.

단점

1. 가독성이 떨어진다.
2. 재활용성이 떨어진다.
3. Classname의 중복여부를 개발자가 확인해야 한다.
4. 프로젝트가 커질 수 록 관리가 힘들어진다.

가독성과 중복되는 CSS의 작성 방식을 해결하기 위해 다양한 전처기를 사용한다. > 이후에 따로 다뤄볼게용 :)

---

CSS IN JS

Javascript안에서 스타일을 정의하는 것을 말합니다.

장점

1. 컴포넌트 단위로 스타일을 정의 할 수 있다.
2. Classname의 중복여부를 고민하지 않아도 된다.
3. 전통적 CSS보다 스타일 확인이 용이하다.

단점

1. 스타일을 JS로 불러오기에 브라우저 로딩시 멈춤 현상이 일어날 수 있다.
2. JS 번들의 크기를 키웁니다.(CSS에 넣을 내용을 JS로 하기 때문)
3. 컴포넌트의 깊이가 깊어 질 수 록 재렌더링 시간이 많이 소요된다.

사용 예시

<조건>
1. 컴포넌트의 값은 색 이름 이며, 배경 색으로 지정한다.
2. 컴포넌트의 값은 변경이 가능하다.

Css

//css

.greenComponents {
	background-color: "green"
}

.redComponents{
	background-color: "red"
}

//js

let value = "red"

return {
	<div className={value === "green"? greenComponents : redComponents}>...
}

간단하게는 이와 같이 구현이 가능하다.
하지만, 만일 조건이 추가되면??

<추가 조건>
1. 색의 종류가 늘어난다.

inCSS 문제는 확장성과 재사용이 힘들다는 부분에서 생긴다.

//css

.greenComponents{...
.blueComponents{...
.redComponents{...

//js
<div className={value === "green"? greenComponents : value === "red"? redComponents : ...?}>

Css in Js

inCss와 동일한 조건으로 CSS in JS로 코드를 작성하면 어떻게 될 것 인가?

//js

import React from "react";
import styled from "styled-components";

const color = "red" 
const colorComponents = styled.div`
  background: ${color};
`;

function ColorComponent({ children }) {
  return <colorComponent>{children}</colorComponent>;
}

inCss에서는 색이 추가될때마다 CSS를 추가하고 경우의 수 를 작성 했다면, CSS in Js 에서는 컬러를 변수로 받아서 바로 사용이 가능한 모습을 보여준다. 가독성 뿐만 아니라 확장성과 재사용성에도 용이한 모습을 보인다.