Search

Styled Component 가변 스타일링

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 2021
vericras@gmail.com
TOP