1. StyledComponent가 뭔데...?
스타일드 컴포넌트(Styled Components) 는 리액트의 라이브러리 중 하나다.
말 그대로 컴포넌트의 스타일을 지정해주는 문법으로, React에서 CSS를 적용하는 방법 중 널리 사용되는 한 가지이다.
2. StyledComponent 사용 방법
그래서 StyledComponent를 어떻게 사용하냐면,,
(1) StyledComponent 라이브러리 설치
일단 먼저 자신의 프로젝트에 StyledComponent 라이브러리를 설치한다.
npm install styled-components(2) StyledComponent 생성
StyledComponent를 생성할 때는 styled 함수를 사용한다.
// Button.js 파일
import styled from 'styled-components';
const Button = styled.button`
background-color: blue;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
`;
export default Button;
여기서 주의할 점!
-
무조건 변수명은 대문자로 시작해야 한다.
버튼을 변수로 지정한 다음 styled 함수를 사용해 버튼의 CSS를 작성한다. -
styled.변수``;형식으로 써야한다.
styled.button``;/styled.div``;/styled.h1``;등, styled 뒤에 html 태그를 넣어줘도 된다. -
백틱 안에는 일반 CSS와 같은 내용을 써준다.
(3) StyledComponent 사용
styled 함수로 만들고 나면 생성한 StyledComponent를 다른 파일에서 불러와서 컴포넌트를 렌더링할 수 있다!
// App.js 파일
import React from 'react';
import Button from './Button'; // 위에서 생성한 스타일드 컴포넌트
function App() {
return (
<div>
<Button>Click me</Button>
</div>
);
}
export default App;
코드를 실행하게 되면 위 그림처럼 버튼이 나타나는 것을 볼 수 있다!
3. StyledComponent를 사용하는 이유
그러면 왜 개발자들이 CSS를 놔두고 StyledComponent를 사용할까?
(1) Component 중심 스타일링
StyledComponent를 사용하면 각 컴포넌트에 해당하는 스타일 정보가 함께 정의되므로 코드를 구조화하고 컴포넌트 기반 스타일링을 할 수 있다.
이로 인해 코드의 가독성과 유지보수성이 향상된다.
(2) 스코프드 스타일링
StyledComponent는 컴포넌트 내에서 스타일을 정의하므로 전역 충돌 문제를 방지할 수 있다. ( 각 컴포넌트의 스타일은 해당 컴포넌트에서만 적용되며, 다른 컴포넌트에 영향을 주지 않는다. )
(3) 동적 스타일링
StyledComponent를 사용하면 JSX 안에서 조건부로 스타일을 변경하거나 props 값을 기반으로 스타일을 동적으로 설정할 수 있다.
예를 들어, 버튼의 배경색을 props로 받아 동적으로 변경하는 컴포넌트를 한 번 만들어보면...
// DynamicButton.js 파일
import React from 'react';
import styled from 'styled-components';
// 스타일드 컴포넌트 정의
const Button = styled.button`
background-color: ${props => props.bgColor || '#007bff'};
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 4px;
`;
// 동적 스타일링을 위한 컴포넌트
const DynamicButton = ({ bgColor, children }) => {
return <Button bgColor={bgColor}>{children}</Button>;
};
export default DynamicButton;
위 코드에서 DynamicButton 컴포넌트는 bgColor 프롭스를 받아서 버튼의 배경색을 동적으로 설정한다.
bgColor props가 제공되면 해당 색상을 사용하고, 프롭스가 없을 경우 기본값인 파란색(#007bff)이 적용된다.
// App.js 파일
import React from 'react';
import DynamicButton from './DynamicButton';
function App() {
return (
<div>
<DynamicButton bgColor="red">Red Button</DynamicButton>
<DynamicButton bgColor="green">Green Button</DynamicButton>
<DynamicButton>Default Button</DynamicButton>
</div>
);
}
export default App;
위 코드를 실행하게 되면
첫 번째 버튼은 배경색이 빨간색으로 바뀌고 Red Button이라고 표시되고,
두 번째 버튼은 배경색이 녹색으로 설정되며 Green Button이라고 표시된다.
마지막으로 세 번째 버튼은 배경색이 기본값인 파란색(#007bff)으로 설정되며 Default Button이라고 표시된다!
4. StyledComponent의 특징
(1) 스코프드 스타일링
아까 이야기했듯이, StyledComponent는 각 컴포넌트의 스타일을 스코프로 제한하므로 전역 스타일 충돌을 방지할 수 있다.
(2) 유지보수
Style과 Component가 함께 정의되므로, 스타일 변경 시 관련 컴포넌트만 수정하면 되기 때문에 코드를 보다 쉽게 유지보수할 수 있다.
(3) 템플릿 리터럴 사용
스타일드 컴포넌트는 템플릿 리터럴 문법을 사용하여 CSS를 작성하므로 JavaScript 코드와 함께 사용하기 용이하다.
5. 글 마무리
StyledComponent는 2023 BSSM 하계 교내 해커톤 때 처음 써봤는데,, 그 때는 CSS가 더 편해서 딱히 주목하지 않았었다.
하지만 다른 친구들이 프로젝트 할 때 StyledComponents를 선호하는 모습을 많이 봐왔고, 글을 쓰면서 CSS 보다 더 장점이 많은 라이브러리라는 것을 새로 알게 되었기 때문에
앞으로 웹페이지를 만들 기회가 생긴다면 CSS 대신 StyledComponenet를 사용해야겠다는 생각이 들었다.
이상 블로그 끝!
