인터넷이 만들어진 이후 기술 발달로 개발자의 CSS 작성 방식도 꾸준히 진화해 오고 있다.
프로젝트의 규모나 복잡도가 점점 커지고 팀원 수도 많아지면서 일관된 패턴의 중요성 인식
다양한 디바이스 등장으로 다양한 디스플레이를 커버해야 하기 떄문에 CSS는 더 복잡해짐
이에 따라 구조화된 CSS의 필요성이 대두 - CSS 전처리기(CSS Preprocessor) 개념 등장
CSS 전처리기 - CSS가 구조적으로 작성될 수 있게 도움을 주는 도구
CSS 전처리기에 맞는 Compiler를 사용해야 CSS 문서로 변환이 됨
SASS (Syntactically Awesome Style Sheets) - CSS를 확장해 주는 스크립팅 언어
특정 속성(color, margin 등)의 값(#fffff, 25rem 등)을 변수로 선언해 필요한 곳에 선언된 변수를 적용 및 재사용
SCSS 코드를 읽어서 전처리한 다음 컴파일해서 전역 CSS 번들 파일을 만들어 주는 전처리기 역할을 함
하지만 CSS 구조화를 해결해 주는 장점보다 다른 단점이 많다는 것이 밝혀짐
CSS 전처리기의 문제를 보완하기 위해 BEM, OOCSS, SMACSS 같은 CSS 방법론이 대두됨
공통 지향점은 코드의 재사용, 간결화 확장성, 예측성이다.
BEM - Block, Element, Modifier로 구분해 클래스명 작성(--와 __로 구분)
클래스명 선택자가 장황해지고, 마크업이 커지고, 재사용 할 때도 모든 UI 컴포넌트를 명시적으로 확장해야하는 단점이 발생
언어 로직 상에 캡슐화의 개념이 없다는 것을 깨닫고 유일한 클래스명을 선택하는 것에 의존할 수 밖에 없었음
CSS도 컴포넌트 영역으로 불러들이기 위해 CSS-in-JS가 탄생하면서 문제 해결
Styled-Component - CSS-in-JS의 대표
기능적 혹은 상태를 가진 컴포넌트들로부터 UI를 완전히 분리해 사용할 수 있는 단순한 패턴 제공
Styled Components
class, id 명 고민 안해도 됨, 찾기 쉬움, 관리하기 편함
CSS를 컴포넌트화 시켜서 React 환경에서 사용가능
설치하기
$ npm install --save styled-components // with npm
$ yarn add styled-component // with yarn
//package.json에 코드 추가 -- 여러 버전이 설치되어 발생하는 문제를 줄여줌
{
"resolutions" : {
"styled-components": "^5"
}
}
import styled from "styled-components" // import로 불러오기
Styled Components 문법
1. 컴포넌트 만들기
백틱 (`)을 사용
컴포넌트 선언한 후 styled.태그종류 할당
백틱 안에 기존 CSS를 작성하던 문법과 똑같이 스타일 속성 작성
React 컴포넌트 사용하듯 리턴문 안에 작성해주면 스타일이 적용된 컴포넌트가 렌더된다.
2. 컴포넌트 재활용
styled()에 재활용할 컴포넌트를 전달해준 다음, 추가하고 싶은 스타일 속성을 작성한다.
3. Props 활용
props를 내려 사용할 수 있다. 내려준 props 값에 따라 컴포넌트를 렌더링하는 것도 가능. ${}를 사용함
조건부 렌더링
전역 스타일 설정하기
import { createGlobalStyle } from "styled-components"; // 전역 스타일 설정을 위한 함수 불러오기
//설정해주고 싶은 스타일 작성
const GlobalStyle = createGlobalStyle`
button {
padding : 5px;
margin : 2px;
border-radius : 5px;
}
`
//최상위 컴포넌트에 사용
function App() {
return (
<>
<GlobalStyle />
<Button>전역 스타일 적용하기</Button>
</>
);
}
