CSS Module
- class, id 등에 random string을 달아주기 때문에 선택자가 겹칠 우려가 없음
- 스타일 충돌을 방지하고 코드를 격리하여 체계적으로 css 설계가 가능
- 스타일링 직접 하나하나 해야 함
UI framework (ex. Ant Design, Material UI)
- 이미 다 만들어져 있어서 간편하고 쉽게 쓰기에 좋음
- 이미 다 만들어져 있어서 styling의 학습 및 훈련이 필요한 초심자들에게는 비추천
- 해당 framework의 디자인 철학을 벗어나기 쉽지 않음
- 컴포넌트들을 커스터마이징 하기 어려움
CSS framework (ex. W3CSS, TailwindCSS)
- 거대한 CSS 파일 하나를 가져오는 것임
- 개발자가 따로 CSS 파일을 작성하지 않아도 html에 클래스만 적어주면 정해진 규칙대로 스타일링이 적용됨
- css에 대한 이해력이 있어도 해당 framework를 사용하기 위한 학습을 또다시 해야 함
- 이미 다 만들어져 있어서 styling의 학습 및 훈련이 필요한 초심자들에게는 비추천
CSS-in-JS library (ex. styled component, emotion)
- 따로 css 파일 만들 것 없이 jsx 파일 안에서 스타일링까지 해결 가능함
- 컴포넌트 재사용성이 쉬워짐
- js 값들을 props로 넘겨줘서 해당 js 값에 의도된 styling을 바로 적용 할 수 있음
- class이름에 random string이 생성되기 때문에 선택자 이름이 겹칠 우려가 없음
- 스타일링을 직접 개발자가 하나하나 해야함
JavaScript template literal
템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다.
`string text ${expressiion} string text`쉽게 말해 문자열 안에서 js 표현식을 사용할 수 있게 하는 문법이다.
CSS와 SCSS 비교
SCSS에서는 선택자 중복 회피 가능
이외에도 SCSS variable 등 여러 추가 기능 가능
Styled Components
패키지 설치
Styled Components는 styled-components라는 NPM 패키지명을 가지고 있습니다. 따라서 React 프로젝트에 다음과 같이 npm 커맨드로 간단히 설치할 수 있습니다.
$ npm i styled-components설치 후에 package.json에 styled-components가 추가된 것을 확인할 수 있습니다.
"dependencies": {
"react": "18.0.0",
"react-dom": "18.0.0",
"styled-components": "5.3.5"
},기본 문법
먼저 위에서 설치한 styled-components 패키지에서 styled 함수를 임포트합니다. styled는 Styled Components의 근간이 되는 가장 중요한 녀석인데요. HTML 엘리먼트나 React 컴포넌트에 원하는 스타일을 적용하기 위해서 사용됩니다.
기본 문법은 HTML 엘리먼트나 React 컴포넌트 중 어떤 것을 스타일링 하느냐에 따라 살짝 다릅니다.
HTML 엘리먼트를 스타일링 할 때는 모든 알려진 HTML 태그에 대해서 이미 속성이 정의되어 있기 때문에 해당 태그명의 속성에 접근합니다.
import styled from "styled-components";
styled.button`
// <button> HTML 엘리먼트에 대한 스타일 정의
`;React 컴포넌트를 스타일링 할 때는 해당 컴포넌트를 임포트 후 인자로 해당 컴포넌트를 넘기면 됩니다.
import styled from "styled-components";
import Button from "./Button";
styled(Button)`
// <Button> React 컴포넌트에 스타일 정의
`;두가지 문법 모두 ES6의 Tagged Template Literals을 사용해서 스타일을 정의합니다. 그리고 styled 함수는 결국 해당 스타일이 적용된 HTML 엘리먼트나 React 컴포넌트를 리턴합니다.
예를 들어, 다음과 같이 Styled Components로 작성된 JavaScript 코드는
import styled from "styled-components";
styled.button`
font-size: 1rem;
`;아래 CSS 코드가 적용된 HTML 엘리먼트를 만들어낸다고 생각하면 쉽습니다.
button {
font-size: 1rem;
}이런 식으로 Styled Components를 이용해서 JavaScript 코드 안에 삽입된 CSS 코드는 글로벌 네임 스페이스를 사용하지 않습니다. 다시 말해, 각 JavaScript 파일마다 고유한 CSS 네임 스페이스를 부여해주기 때문에, 각 React 컴포넌트에 완전히 격리된 스타일을 적용할 수 있게 됩니다
