Styled Components
React 환경에서 사용 가능한 Styled Components라는 라이브러리는 CSS를 컴포넌트화 해준다.
Styled Components는 CSS in JS라는 개념이 대두되면서 나온 라이브러리로 기존에 HTML, CSS, JS 파일로 쪼개서 개발하던 방법에서, React 등의 라이브러리의 등장으로 컴포넌트 단위 개발이 주류가 되었지만, CSS는 그렇지 못했다는 점에서 출발한 개념이다.
CSS in JS 라이브러리를 사용하면 CSS도 쉽게 Javascript 안에 넣어줄 수 있으므로, HTML + JS + CSS까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발할 수 있게 된다. 이런 CSS in JS 라이브러리 중에서 현재 가장 인기 있는 라이브러리가 바로 Styled Components이다.
Styled Components 설치
우선npm install --save styled-components 을 터미널에 입력해 설치하면 된다.
그후 Styled Components는 package.json에 다음 코드를 추가하도록 권장하고 있으니 추가하길 바란다. 아래의 코드를 추가하면 여러 버전의 Styled Components가 설치되어 발생하는 문제를 줄여준다.
// package.json에 추가
{
"resolutions": {
"styled-components": "^5"
}
}그 다음 Styled Components를 사용할 파일로 불러와주면 사용준비가 완료된다.
//사용할 파일에 import
import styled from "styled-components"Styled Components 문법
컴포넌트 만들기
//Styled Components 문법
const 컴포넌트이름 = styled.태그종류`
css속성1: 속성값;
css속성2: 속성값;
`;
//예시
const BlueButton = styled.button`
background-color: blue;
color: white;
`;Styled Components는 따옴표가 아닌 백 틱을 쓰는 ES6의 Templete Literals 문법을 사용한다.
컴포넌트를 선언한 후 styled.태그종류를 할당하고 백 틱 안에 css문법으로 스타일 속성을 작성해주면 된다. 이렇게 만든 컴포넌트를 React컴포넌트를 사용하듯 리턴문 안에 작성해주면 스타일이 적용된 컴포넌트가 렌더 되는 것을 확인할 수 있다.
// Styled Components의 예
import styled from "styled-components";
//Styled Components로 컴포넌트를 만들고
const BlueButton = styled.button`
background-color: blue;
color: white;
`;
export default function App() {
// React 컴포넌트를 사용하듯이 사용하면 된다.
return <BlueButton>Blue Button</BlueButton>;
}
컴포넌트를 재활용해서 새로운 컴포넌트 만들기
//컴포넌트를 재활용해서 새로운 컴포넌트를 만드는 법
const 컴포넌트이름 = styled(재활용할 컴포넌트)`
추가할css속성1 : 속성값;
추가할css속성2 : 속성값;
`;
//컴포넌트를 재활용해서 새로운 컴포넌트를 만드는 법
const BigBlueButton = styled(BlueButton)`
padding: 10px;
margin-top: 10px;
`;
컴포넌트를 선언하고 styled()에 재활용할 컴포넌트를 전달해준 다음 추가하고 싶은 스타일 속성을 작성해주면 컴포넌트를 재활용한 새로운 컴포넌트를 만들 수 있다.
//컴포넌트를 재활용해서 새로운 컴포넌트를 만드는 법의 예
import styled from "styled-components";
const BlueButton = styled.button`
background-color: blue;
color: white;
`;
//만들어진 컴포넌트를 재활용해 컴포넌트를 만들 수 있다.
const BigBlueButton = styled(BlueButton)`
padding: 10px;
margin-top: 10px;
`;
//재활용한 컴포넌트를 재활용할 수도 있다.
const BigRedButton = styled(BigBlueButton)`
background-color: red;
`;
export default function App() {
return (
<>
<BlueButton>Blue Button</BlueButton>
<br />
<BigBlueButton>Big Blue Button</BigBlueButton>
<br />
<BigRedButton>Big Red Button</BigRedButton>
</>
);
}Props 활용
Styled Component로 만든 컴포넌트도 React컴포넌트처럼 props를 내려줄 수 있다. 내려준 props 값에 따라 컴포넌트를 렌더링 하는 것도 가능하다.
// Props 활용법
const 컴포넌트이름 = styled.태그종류`
css속성: ${(props) => 함수코드}
`;Styled Components는 템플릿 리터럴 문법( ${ } )을 사용하여 JavaScript 코드를 사용할 수 있다. props를 받아오려면 props를 인자로 받는 함수를 만들어 사용하면 된다.
Props로 조건부 렌더링하기
// Props로 조건부 렌더링하기
const Button = styled.button`
background: ${(props) => props.skyblue? "skyblue":"white"}
`;위 코드의 경우 삼항 연산자를 활용해 <Button> 컴포넌트에 skyblue 라는 props가 있는지 확인하고 있으면 배경색으로 skyblue를, 없을 땐 white를 지정해주는 코드다.
// Props로 조건부 렌더링의 예
import styled from "styled-components";
import GlobalStyle from "./GlobalStyle";
//받아온 prop에 따라 조건부 렌더링이 가능합니다.
const Button1 = styled.button`
background: ${(props) => (props.skyblue ? "skyblue" : "white")};
`;
export default function App() {
return (
<>
<GlobalStyle />
<Button1>Button1</Button1>
<Button1 skyblue>Button1</Button1>
</>
);
}Props 값으로 렌더링하기
// Props 값으로 렌더링하기
const Button = styled.button`
background: ${(props) => props.color ? props.color : "white"}
`;이처럼 props의 값을 통째로 활용해서 컴포넌트 렌더링에 활용할수 있다. props.color가 없다면 white를, props.color가 있다면 props.color의 값을 그대로 가져와서 스타일 속성 값으로 리턴해주고 있는 것을 볼 수 있다. 그 결과 color 라는 이름으로 받은 props의 값으로 배경색이 지정된 것을 확인할 수 있다.
꼭 삼향연산자만 사용해야하는 것은 아니다. JavaScript 코드라면 무엇이든 사용할 수 있으므로 원하는 값을 사용할 수 있도록 함수코드를 만들어 사용하면 된다. 아래 예시와 같은 코드다 활용할 수 있다. props도 원하는 만큼 받아서 사용할 수 있으니 다양한 활용이 가능하다.
// Props 값으로 렌더링의 예
import styled from "styled-components";
import GlobalStyle from "./GlobalStyle";
//받아온 prop 값을 그대로 이용해 렌더링할 수도 있다
const Button1 = styled.button`
background: ${(props) => (props.color ? props.color : "white")};
`;
//다음과 같은 형식으로도 활용할 수 있다.
const Button2 = styled.button`
background: ${(props) => props.color || "white"};
`;
export default function App() {
return (
<>
<GlobalStyle />
<Button1>Button1</Button1>
<Button1 color="orange">Button1</Button1>
<Button1 color="tomato">Button1</Button1>
<br />
<Button2>Button2</Button2>
<Button2 color="pink">Button2</Button2>
<Button2 color="turquoise">Button2</Button2>
</>
);
}전역 스타일 설정하기
import { createGlobalStyle } from "styled-components";전역에 스타일을 설정하고 싶을 땐 우선 전역 스타일을 설정하기 위해 Styled Components에서 reateGlobalStyle 함수를 불러온다.
const GlobalStyle = createGlobalStyle`
button {
padding : 5px;
margin : 2px;
border-radius : 5px;
}
`그다음 이를 사용해 CSS 파일에서 작성하듯 설정해주고 싶은 스타일을 작성한다.
function App() {
return (
<>
<GlobalStyle />
<Button>전역 스타일 적용하기</Button>
</>
);
}이렇게 만들어진 <GlobalStyle> 컴포넌트를 최상위 컴포넌트에서 사용해 주면 전역에 <GlobalStyle> 컴포넌트의 스타일이 적용된다.
// 전역 스타일 설정 예시
import styled, { createGlobalStyle } from "styled-components";
const Button = styled.button`
padding: 1rem;
font-size: 2rem;
background: powderblue;
border-radius: 1rem;
transition: 0.5s;
&:hover {
background: cornflowerblue;
color: white;
transition: 0.5s;
}
`;
const GlobalStyle = createGlobalStyle`
* {
margin: 0.5rem;
}
`;
export default function App() {
return (
<>
<GlobalStyle />
<Button>Practice!</Button>
</>
);
}
vscode-styled-components
Styled Components를 사용할 때, CSS 코드를 템플릿 리터럴을 사용해서 작성하게 되기에 VSCode에서 코드 작성 시 CSS 파일에서 작성하는 것처럼 자동 완성 기능을 사용할 수 없다. vscode-styled-components 익스텐션은 Styled Components를 사용시에도 자동완성 기능을 사용할 수 있도록 해주는 유용한 익스텐션이다.
