CSS - CSS in JS 방법론

1. CSS 전처리기

 

1. CSS 를 구조화하는 방법에 대한 연구로 CSS 전처리기( CSS Preprocessor )라는 개념이 등장했다.
2. CSS 전처리기란 CSS 가 구조적으로 작성될 수 있게 도움을 주는 도구이다.
3. 하지만 이 CSS 전처리기 자체만으로는 웹서버가 인지하지 못하기 때문에 각 CSS 전처리기에 맞는 Compiler 를 사용해야하고 컴파일을 하게 되면 실제로 우리가 사용하는 CSS 문서로 변환이 된다.
4. 이를 통해서 CSS 파일들을 잘 구조화할 수 있게 되었고, 최소한 CSS 파일을 몇 개의 작은 파일로 분리할 수 있는 방법이 생겼다.

-----------------------------------------------------------------------------------

2. SASS

 

1. CSS 전처리기 중에서 가장 유명한 SASS 는 Syntactically Awesome Style Sheets 의 약자로, CSS 를 확장해 주는 스크립트 언어이다.
2. CSS 를 만들어주는 언어로, JS 처럼 속성값을 변수로 선언하여 필요한 곳에 선언된 변수를 적용할 수도 있고, 반복되는 코드를 한번의 선언으로 여러 곳에서 재사용할 수 있도록 해주는 기능을 가졌다.
3. 그래서 SASS 는 SCSS 코드를 읽어서 전처리한 다음 컴파일해서 전역 CSS 번들 파일을 만들어주는 전처리기의 역할을 한다.
4. 하지만 SASS 가 'CSS 의 구조화'를 해결해주는 것의 장점보다 다른 문제들을 더 많이 만들어낸다는 것이 밝혀졌다.

-----------------------------------------------------------------------------------

3. CSS 구조화를 위한 다양한 시도

 

1. 이러한 CSS 전처리기의 문제를 보완하기 위한 BEM, OOCSS, SMACSS 같은 CSS 방법론이 대두되었다.
2. 각각 장단점이 있으나 결국 3 가지 방법론 모두 같은 지향점을 가지고 있다.

 

## 방법론의 공통적인 지향점 ##

1. 코드의 재사용
2. 코드의 간결화( 유지보수가 용이함 )
3. 코드의 확장성
4. 코드의 예측성( 클래스명으로 미리 예측 )

 

3 - 1) BEM

 

1. BEM 은 Block, Element, Modifier 로 구분하여 클래스명을 작성하는 방법이다.
2. 클래스명은 BEM 방식의 이름을 여러번 반복하여 재사용할 수 있도록 하며 HTML/CSS/SASS 파일에서도 더 일관된 코딩 구조를 만들어준다.

 

## 문제점 ##

1. 클래스명의 선택자가 장황해지고, 이런 긴 클래스명 때문에 마크업이 불필요하게 커지며, 재사용하려고 할 때마다 모든 UI 컴포넌트를 명시적으로 확장해야만 했다.
2. SASS 와 BEM 도 고치지 못했던 몇 가지 문제들은 언어 로직 상에 진정한 캡슐화의 개념이 없다.
3. 이로 인해 개발자들이 유일한 클래스명을 선택하는 것에 의존하는 수 밖에 없었다.

-----------------------------------------------------------------------------------

4. CSS-in-JS

 

1. 어플리케이션으로 개발 방향이 진화하며 컴포넌트 단위의 개발은 캡슐화의 중요성을 불러왔다.
2. 하지만 CSS 는 컴포넌트 기반의 방식을 위해 만들어진 적이 한 번도 없었다.
3. 결국 CSS 도 컴포넌트의 영역으로 불러들이기 위해서 CSS-in-JS 가 탄생해서 이 문제를 정확하게 해결했다.

 

## Styled-Component ##

1. CSS-in-JS 에는 대표적으로 Styled-Component 가 있다.
2. Styled-Component 는 기능적( Functional ) 혹은 상태를 가진 컴포넌트들로부터 UI 를 완전 분리해 사용할 수 있는 아주 단순한 패턴을 제공한다.
3. Styled-Component 를 사용하면 기존 CSS 문법으로도 스타일 속성이 추가된 React 컴포넌트를 만들 수 있다.
4. CSS-in-JS 라이브러리로 emotion 과 styled-jsx 가 있지만, 현재 가장 인기있는 라이브러리는 Styled-Component 이다.

 

## Styled-Component 특징 ##

1) Automatic Critical CSS

Styled Component 는 화면에 어떤 컴포넌트가 렌더링 되었는지 추적해서 해당하는 컴포넌트에 대한 스타일을 자동으로 삽입한다. 따라서 코드를 적절히 분배해 놓으면 사용자가 어플리케이션을 사용할 때 최소한의 코드만으로 화면이 띄워지도록 할 수 있다.

 

2) No Class Name Bugs

Styled Component 는 스스로 유니크한 className 을 생성한다. 이는 className 의 중복이나 오타로 인한 버그를 줄여준다.

 

3) Easier Deletion of CSS

기존에는 더 이상 사용하지 않거나 삭제한 컴포넌트에 해당하는 스타일 속성을 제거하기위해 CSS 파일 안의 className 을 찾아야했다. 하지만 Styled Component 는 모든 스타일 속성이 특정 컴포넌트와 연결되어 있기 때문에 만약 컴포넌트를 더 이상 사용하지 않아 삭제할 경우 이에 대한 스타일 속성도 함께 삭제된다.

 

4) Simple Dynamic Styling

className 을 일일히 수동으로 관리할 필요 없이 React 의 props 나 전역 속성을 기반으로 컴포넌트에 스타일 속성을 부여하기 때문에 간단하고 직관적이다.

 

5) Painless Maintenance

컴포넌트에 스타일을 상속하는 속성을 찾아 다른 CSS 파일들을 검색하지 않아도 되기 때문에 코드의 크기가 커지더라도 유지보수가 어렵지 않다.

 

6) Automatic Vendor Prefixing

개별 컴포넌트마다 기존의 CSS 를 이용하여 스타일 속성을 정의하면 될 뿐이다. 이외의 것들은 Styled Component 가 알아서 처리해준다.

 

## 사용 ##

• Styled Component 를 설치하고 나면 package.json 에 아래 코드를 추가시켜 주자. 여러 버전의 Styled Component 가 설치되어 발생하는 문제를 줄여준다.

{
  "resolutions": {
    "styled-components": "^5"
  }
}

 

-----------------------------------------------------------------------------------

5. Adapting base on props & Extending Styles

 

1. Styled Component 는 스타일 속성을 지닌 컴포넌트를 정의할 때에 함수를 전달하고, 그 함수 안에서 props 를 사용할 수도 있다.
2. 또한 같은 스타일 속성을 지닌 여러개의 컴포넌트들 중 몇 개의 컴포넌트에 약간의 변화를 주고 싶은 경우에는 상속받고자 하는 스타일 속성을 지닌 컴포넌트를 styled()로 감싼 뒤, 변경하고 싶은 속성만 새로 정의해 주면 기존 속성을 확장해서 사용할 수 있다.