Styled Components의 특징
Styled Components는 React 애플리케이션의 컴포넌트에 스타일을 적용하는 라이브러리입니다. CSS-in-JS 라이브러리 중 하나로, JavaScript를 통해 CSS 스타일을 정의하고, 이를 컴포넌트와 연결합니다. 그렇다면, Styled Components가 내부적으로 어떻게 동작하는지 살펴보겠습니다.
1. JavaScript로 CSS 생성
먼저, Styled Components는 JavaScript 문법을 사용하여 CSS를 정의합니다.
import styled from 'styled-components';
const Button = styled.button`
background-color: blue;
color: white;
`;여기서 styled.button은 버튼 태그에 대한 스타일을 정의합니다.
2. 동적 스타일링
JavaScript의 표현식을 사용하여 동적으로 스타일을 변경할 수 있습니다.
const Button = styled.button`
background-color: ${props => props.primary ? 'blue' : 'white'};
color: ${props => props.primary ? 'white' : 'blue'};
`;위 예시에서는 primary라는 prop에 따라 배경색과 글자색을 동적으로 변경합니다.
3. 유니크 클래스명 생성
Styled Components는 정의된 스타일마다 고유한 클래스 이름을 생성합니다. 예를 들어, Button 컴포넌트를 렌더링하면 다음과 같은 결과가 나타납니다:
<button class="sc-AxheI bKYoTc">Click me!</button>여기서 sc-AxheI와 bKyoTc는 Styled Components가 자동으로 생성한 클래스명입니다. 이 클래스명은 충돌 없이 스타일을 적용하기 위한 것입니다.
4. <style> 태그로 스타일 적용
Styled Components는 위에서 생성한 유니크한 클래스명에 해당하는 스타일을 <style> 태그 안에 동적으로 추가합니다. 이 <style> 태그는 문서의 <head> 내부에 위치합니다.
5. 서버 사이드 렌더링 지원
Styled Components는 서버에서 컴포넌트를 렌더링할 때 스타일을 포함시키는 기능을 제공합니다. 이를 통해 초기 페이지 로드 속도를 개선하고, 깜박임 현상을 줄일 수 있습니다.
6. 테마 및 글로벌 스타일
Styled Components는 ThemeProvider 컴포넌트를 제공하여, 앱 전체에 걸쳐 일관된 테마나 글로벌 스타일을 적용할 수 있습니다.
결론
Styled Components는 JavaScript의 힘을 활용하여, 동적인 스타일링 및 컴포넌트 기반의 스타일링을 가능하게 합니다. 이를 위해 내부적으로는 유니크한 클래스명 생성, 동적 <style> 태그 삽입 등의 작업을 수행합니다. 이러한 기능 덕분에 개발자는 CSS의 주요 문제점들을 우회하면서, React의 컴포넌트 방식과 잘 맞는 스타일링을 구현할 수 있습니다.
styled-components와 Tagged Template Literals styled-components는 어떻게 style을 만들까
"styled-components"는 자바스크립트에서 CSS 스타일링을 위한 매우 인기있는 라이브러리입니다. 이 라이브러리의 핵심 기능 중 하나는 Tagged Template Literals라는 ES6의 템플릿 리터럴 기능을 활용하는 것
dane-itview.tistory.com
'개발관련 > 프론트엔드 지식' 카테고리의 다른 글
| [번역] styled-components는 어떻게 동작 하나 (0) | 2023.08.10 |
|---|---|
| styled-components와 Tagged Template Literals styled-components는 어떻게 style을 만들까 (0) | 2023.08.09 |
| 리플로우가 일어나는 css 스타일 속성과 일어나지 않는 스타일 속성이 무엇이 있나요? (0) | 2023.07.11 |
| OWASP Top 10: 웹 애플리케이션 보안 취약점 (0) | 2023.07.09 |
| 프론트 엔드 면접 관련 공부 (0) | 2023.05.11 |
