Styled Component 기본적인 사용법을 정리해보고자 한다.
샘플 소스 1
src/Component/Button.js
import React from "react"
import styled from "styled-components"
const StyledButton = styled.button`
padding: 0.375rem 0.75rem;
border-radius: 0.25rem;
font-size: 1rem;
line-height: 1.5;
border: 1px solid lightgray;
color: ${(props) => props.color || "gray"};
background: ${(props) => props.background || "white"};
`;
const Button = ({ name, color, background }) => {
return (
<StyledButton color={color} background={background}>
{name}
</StyledButton>
)
};
export default Button;
JavaScript
복사
src/App.js
import React from "react"
import Button from "./Component/Button"
const App = () => {
return (
<>
{/* 버튼 1 */}
<Button name="버튼 1" />
{/* 버튼 2 */}
<Button name="버튼 2" color="black" />
{/* 버튼 3 */}
<Button name="버튼 3" color="white" background="yellow" />
</>
);
};
export default App;
JavaScript
복사
위의 예제를 보면 Button이라는 컴포넌트를 만들어 import 한 다음
동일한 컴포넌트이지만 각각 다른 props를 전달하여 모두 다른 스타일을 내주는 것을 알 수 있다.
여기서 props는 Button 태그에 설정된 속성값 name, color, background 모두 props이다.
<StyledButton> 에 전달된 props값 중 name은 버튼명으로 되어 있으며,
나머지는 styled에 전달되어 조건부로 스타일을 적용시키고 있다.
${(props) => props.color || "gray"}
JavaScript
복사
해당 props내 color 값이 없을경우 기본으로 gray색상을 가지게 된다.
샘플 소스 2
src/Component/Button.js
import React from "react"
import styled, { css } from "styled-components"
const StyledButton = styled.button`
padding: 0.375rem 0.75rem;
border-radius: 0.25rem;
font-size: 1rem;
line-height: 1.5;
border: 1px solid lightgray;
${(props) =>
!props.primary &&
css`
color: black;
background: gray;
border-color: gray;
`}
${(props) =>
props.primary &&
css`
color: white;
background: navy;
border-color: navy;
`}
`
const Button = ({ name, ...props }) => {
return <StyledButton {...props}>{name}</StyledButton>
}
export default Button;
JavaScript
복사
src/App.js
import React from "react"
import Button from "./Component/Button"
const App = () => {
return (
<>
{/* 버튼 1 */}
<Button name="버튼 1" />
{/* 버튼 2 */}
<Button name="버튼 2" primary={true} />
</>
);
};
export default App;
JavaScript
복사
1번 샘플 소스와 비슷하지만 조건에 따라 다중 CSS속성을 줄 수 있다.
버튼 1은 primary라는 props가 없고, !props.primary 값이 없다는 조건이 충족되므로 회색 버튼이 된다.
버튼 2는 primary props값이 존재하기 때문에 네이비 색상이 입혀진다.
잠시{...props} 구문을 설명하자면 Button 컴포넌트의 모든 속성이 props로 전달되어 적용이 되어진다.
가령 아래처럼 할 경우 원하는대로 버튼 태그에 속성을 추가할 수 있다.
<Button name="버튼" type="button" className="class1 class2" />
JavaScript
복사
기본적인 Styled Components에 사용법에 대해 알아보았다.
간단해 보이지만 동적으로 값을 조정해 여러가지 스타일을 구사한다면 무궁무진할 것이다.
다음에 기회가 된다면 다른 예제도 올리고자 한다.
ⓒ VeriCras 2024
vericras＠gmail.com