- 효율적인 CSS작업을 위해서 구조화된 CSS의 필요성이 대두되었다.
- 기존의 CSS 작성은 일관된 패턴이 없고, 모바일이나 태블릿같은 다양한 환경에서의 웹사이트가 생겨남에 따라 CSS가 너무 복잡해져, 구조화된 CSS가 필요하게 되었다.
CSS preprocessor
- CSS 전처리기 (CSS preprocessor)가 등장하여 CSS에 변수, 함수, 상속과 같은 프로그래밍 개념을 탑재하여 구조화할 수 있었다.
- 하지만, CSS 전처리기는 맞춤 컴파일러에 의해서 컴파일되어 CSS 파일로 변환해야 됐고, 디버깅이 어려웠으며 컴파일된 CSS 파일의 크기가 너무 큰 문제가 있었다.
- 대표적인 CSS preprocessor로 SASS(Syntactically Awesome Style Sheets) 가 있다.
CSS 방법론
- CSS 전처리기의 문제를 해결하기 위해서 CSS 방법론이 등장했다.
- CSS 방법론은 코드의 재사용, 코드의 간결화, 코드의 확장성, 코드의 예측성을 지향하여 만들어졌다.
- 이를 통해서 클래스 명으로 의미 예측할 수 있고, 유지 보수에 용이하게 CSS를 작성할 수 있다.
- 같이 일하는 팀에서 CSS 작성 방법을 규칙으로 정하는 것은 중요하다.
대표적인 CSS 방법론 BEM
- BEM은 Block, Element, Modifier의 줄임말로 Block, Element, Modifier을 기준으로 클래스명을 작성하는 방법이다.
- 하지만, 클래스명이 너무 길어져 직관적이지 않은 단점이 있다.
- 클래스명이 너무 길어져 마크업이 불필요하게 커지고, 재사용시 모든 UI 컴포넌트를 명시적으로 확장해야만 했다.
- CSS 방법론에 진정한 encapsulation은 없었기에 유일한 클래스명을 사용하는 것에 의존했다.
CSS-in JS
- CSS의 encapsulation을 위해서 CSS를 컴포넌트의 영역으로 불러들인 것이 CSS-in JS이다.
- 가장 대표적인 CSS-in JS로 Styled-Component가 있다.
- Styled-Component은 기능, 상태를 가진 컴포넌트로부터 UI를 완전히 분리해 사용할 수 있게 해준다.
- Styled-Component를 사용하면, CSS를 컴포넌트 내부로 캡슐화 할 수 있고, 클래스 네이밍이나 최적화에 대한 고민을 하지 않아도 된다.
- 하지만, 페이지 로딩이 느려질 수 있다.
Styled-Component 설치
# npm에서 설치
$ npm install --save styled-components
# yarn에서 설치
$ yarn add styled-components- 위와 같이 Styled-Component를 설치할 수 있다.
- import styled from "styled-components"; 으로 Styled-Component를 불러와 사용한다.
{
"resolutions": {
"styled-components": "^5"
}
}- package.json에 위와 같은 코드를 넣어 여러 버전의 Styled Component가 설치되어 발생하는 문제를 줄여준다. (권장사항)
Styled-Component 문법
- Styled-Component는 tagged template literals 라는 ES6 문법을 이용한다.
- 리액트에서 컴포넌트를 만들듯, 변수 안에 CSS 속성과 태그를 넣는다.
- styled.태그이름 으로 어떤 태그를 사용할지 지정한다.
- 태그뒤에 백틱을 사용하여 백틱의 내부에 CSS 속성을 설정한다.
const link = styled.a`
display: inline-block;
border-radius: 3px;
padding: 0.5rem 0;
margin: 0.5rem 1rem;
width: 11rem;
`;참고자료 : 코드스테이츠
🙌🙌🙌🙌