Styled Components를 이용한 React 스타일링

이전 강의에서 전역 CSS와 인라인 스타일링을 사용한 스타일링 기법을 살펴보았습니다. 이번 강의에서는 대규모 애플리케이션에 더 효율적인 접근 방식인 styled-components 라이브러리 사용을 다루겠습니다.

자, 이전 강의에서 사용했던 CSS 스타일이 없는 컴포넌트를 가져옵니다:

function App() {
	return (
		<div>
			<p>text</p>
			<p>text</p>
			<p>text</p>
		</div>
	);
}

먼저, Styled Components 라이브러리를 설치합니다:

npm install --save styled-components

그런 다음 필요한 패키지를 App 컴포넌트로 가져옵니다:

import styled from 'styled-components';

이제 태그를 스타일로 감싸서 JS에 직접 포함된 스타일을 적용한 React 컴포넌트로 사용할 수 있습니다. 이런 접근 방식을 CSS in JS라고도 합니다.

첫 번째 단락을 스타일링해 봅시다. 이를 위해 App 함수 앞, import 문 뒤에 Text1 컴포넌트를 생성합니다. 라이브러리의 styled 객체에서 단락이 필요하므로 styled.p라고 작성합니다. 그런 다음 템플릿 문자열 안에 일반 CSS처럼 필요한 CSS 스타일을 나열합니다:

const Text1 = styled.p`
	color: orangered;
	font-weight: bold;
`;

보시다시피, 여기서는 템플릿 문자열 형태의 순수 CSS를 사용하며, 이는 매우 편리합니다. 이와 유사하게 미디어 쿼리, 의사 요소, 선택자 및 기타 CSS 기능을 사용할 수 있습니다.

이제 App 컴포넌트 함수 내부에서 p 태그를 생성한 CSS 스타일이 적용된 컴포넌트 Text1로 바꿉니다:

<Text1>text</Text1>

비슷한 방식으로 두 번째 및 세 번째 단락을 스타일링합니다. 이를 위해 Text2 및 Text3 컴포넌트를 생성합니다:

const Text2 = styled.p`
	font-style: italic;
	color: brown;
`;

const Text3 = styled.p`
	background-color: orange;
	font-weight: bold;
	color: white;
`;

마지막으로, div를 스타일링합니다. 이를 위해 컴포넌트를 생성하고 Container라고 이름 붙입니다:

const Container = styled.div`
	width: 200px;
	border: 2px solid brown;
	padding: 10px;
	text-align: center;
`;

모든 태그를 생성한 컴포넌트로 바꿉니다:

import styled from "styled-components";

const Container = styled.div`
	width: 200px;
	border: 2px solid brown;
	padding: 10px;
	text-align: center;
`;

const Text1 = styled.p`
	color: orangered;
	font-weight: bold;
`;

const Text2 = styled.p`
	font-style: italic;
	color: brown;
`;

const Text3 = styled.p`
	background-color: orange;
	font-weight: bold;
	color: white;
`;

function App() {
	return (
		<Container>
			<Text1>text</Text1>
			<Text2>text</Text2>
			<Text3>text</Text3>
		</Container>
	);
}

이런 접근 방식을 통해 스타일이 적용된 재사용 가능한 컴포넌트를 만들 수 있습니다.

브라우저의 개발자 도구에서 생성된 마크업을 열어보면, 각 컴포넌트에 고유한 클래스가 생성된 것을 볼 수 있습니다. 따라서 이제 개별 컴포넌트의 클래스 간 충돌에 대해 걱정할 필요가 없습니다.

비슷한 방식으로, 예를 들어 Emotion과 같은 라이브러리를 사용하여 컴포넌트를 스타일링할 수 있습니다.

이전 강의의 과제에서 만들었던 React 컴포넌트를 가져와 Styled Components 라이브러리를 사용하여 스타일링하세요.