Styled-Components
Styled-Components๋
React์์ ์ฌ์ฉ๋๋ CSS-in-JS ๋ผ์ด๋ธ๋ฌ๋ฆฌ
Install
npm i styled-components
npm i -D @types/styled-components @swc/plugin-styled-components
.swcrc
.swcrc
Babel Plugin์ SWC์์ ์ธ ์ ์๋๋ก ํฌํ ํ ๊ฒ๋ ํจ๊ป ์ค์นํ์(SSR ์ง์ ๋ฑ์ ์ํ ๊ณต์ ๊ถ์ฅ์ฌํญ).
{
"jsc": {
"experimental": {
"plugins": [
[
"@swc/plugin-styled-components",
{
"displayName": true,
"ssr": true
}
]
]
}
}
}
Usage
HTML ์์ ์ด๋ฆ์ ์ถ๊ฐํ ๋ค์ ๋ฐฑํฑ(`) ๊ธฐํธ๋ก ๊ฐ์ผ ์์ญ์ CSS ์ฝ๋๋ฅผ ์์ฑํ๋ฉด CSS ์คํ์ผ์ด ๋ฐ์๋ React ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค์ด๋ธ๋ค.
import styeld from 'styled-components'
const StyledH2 = styled.h2`
color: #0066ff;
font-size: 1.5rem;
`
๋์ ์๋ฆฌ
๋ฐฑํฑ์ ์ด์ฉํ Tagged Template literals
๋ฌธ๋ฒ์ ์ฌ์ฉํ์ฌ ์คํ์ผ์ ์์ฑํ๋ค.
Tagged Template Literals ๋ฌธ๋ฒ์ด๋?
Template Literals(`) ๊ณผ ํจ๊ป ์ฌ์ฉ๋๋ ํจ์๋ก, ํจ์ ์์ ๋ฐฑํฑ์ ์ด์ฉํด ๋ฌธ์์ด๊ณผ ${}๋ก ๊ฐ์ผ js ์ฝ๋๋ฅผ ์์ฑํ๋ฉด ํด๋น ํจ์์ ์ธ์๋ก ์ ๋ฌ๋์ด ํธ์ถ๋๋ค.
์ฒซ ๋ฒ์งธ ์ธ์๋ก ``(๋ฐฑํฑ)์ผ๋ก ๋ฌถ์ธ ๋ฌธ์ ๊ฐ์ ๋ฐฐ์ด์ด ์ ๋ฌ๋๋ค.
๋ ๋ฒ์งธ ์ธ์๋ถํฐ๋ ${}(ํ ํ๋ฆฟ ์คํธ๋ง)์ผ๋ก ๊ฐ์ผ JS ํํ์์ ๊ฒฐ๊ณผ ๊ฐ์ด ์ฌ์ฉํ ์์๋๋ก ์ ๋ฌ๋๋ค.
const result = styledTag`
ํ๊ทธ
${1 + 9}
ํ
ํ๋ฆฟ
${'๋ถํ๋' + '์ฒญ์ถ'}
๋ฆฌํฐ๋ด
${ true && 'return True'}
`
const styledTag = (strings, ...expressions) => {
console.log(strings);
// [" ํ๊ทธ "," ํ
ํ๋ฆฟ "," ๋ฆฌํฐ๋ด "]
console.log(expressions);
// "[10, '๋ถํ๋ ์ฒญ์ถ', 'return True']
}
์๋ ์ฝ๋๋ ์ค์ ๋ก ์คํ์ผ๋ ์ปดํฌ๋ํธ์ ๋ด๋ถ ๋์ ์ฝ๋๊ฐ ์๋๊ณ , ํ๊ทธ๋ ๋ฆฌํฐ๋ด ํ ํ๋ฆฟ์ ์ด๋ป๊ฒ ์ฌ์ฉํ๋์ง์ ๋ํ ์์ ์ฝ๋์ด๋ค.
์คํ์ผ๋ ์ปดํฌ๋ํธ๋ ํ๊ทธ๋ ํฌํ๋ฆฟ ๋ฆฌํฐ๋ด์ ์ฌ์ฉํด์ ์คํ์ผ์ด ํฌํจ๋ ์ปดํฌ๋ํธ ๊ฐ์ฒด๋ฅผ ๋ง๋ค๊ณ ๋ ๋๋ง ๋ ๋ ์ปดํฌ๋ํธ์ ๋์ ์ผ๋ก ์์ฑ๋ ํด๋์ค๋ฅผ ๋ถ์ฌํ๊ณ ํด๋น ์คํ์ผ์ <style> ํ๊ทธ์ ์ถ๊ฐํ๋ค.
styleTag('h1')`
color: #0066ff;
background: #fff;
`
// ์ ์๋๋ ๊ฐ์
styleTag('h1')([
color: #0066ff;
background: #fff;
})
function styleTag(element) {
const styleEl = document.createElement(element)
return function(cssText) { // ํจ์๋ฅผ ๋ฐํํ๋ ๊ณ ์ฐจํจ์
const cssStyles = cssText.toString().split(';');
const cssKeyValues = cssStyles.map(style => style.trim().split(':'); cssKeyValues.forEach([key, value]) => {
if (key && value) {
styleEl.style[key] = value;
}
}
return styleEl
}
}
์ปดํฌ๋ํธ ์ปค์คํ
์ปดํฌ๋ํธ๋ฅผ ์ปค์คํ ํ๋ ๊ฒ๋ ๊ฐ๋ฅํ๋ค.
styled
๊ฐ ๋์ ์ผ๋ก ํด๋์ค๋ฅผ ์์ฑํ๊ธฐ ๋๋ฌธ์ ์ด ์ปค์คํ ํด๋์ค๋ฅผ ์ปค์คํ ํ ์ปดํฌ๋ํธ์ ์ฐ๊ฒฐ ํด์ฃผ์ด์ผ ํ๋ค.์ปค์คํ ํ๋ ์ปดํฌ๋ํธ๋ className props๋ฅผ ์ถ๊ฐํ๊ณ ์ปค์คํ ํ ์์์ ์ง์ ํด์ฃผ์ด์ผ ํ๋ค. (๋ณดํต์ ๊ฐ์ฅ ๋ฐ๊นฅ์ ๊ฑธ์ด๋ )
const Button = styled(Component)`
//...
`;
export defaulft Componet(className) {
return <StyledComponent className={className} />
}
props
์กฐ๊ฑด๋ถ ์คํ์ผ์ ์ง์ ํ ๋ ํ์ฉ
import styled, { css } from 'styled-components';
type ParagraphProps = {
active?: boolean;
}
const Paragraph = styled.p<ParagraphProps>`
color: ${(props) => (props.active ? '#F00' : '#888')};
${(props) => props.active && css`
font-weight: bold;
`}
`;
// ๋์ผ
const Paragraph = styled.p<ParagraphProps>`
${({ active }) => css`
color: ${active ? '#f00' : '#888'};
font-weight: ${active ? 'bold' : 'normal'
`}
`;
์คํ์ผ๋ ์ปดํฌ๋ํธ์ ์ถ๊ฐ ์์ฑ์ ์ง์ ํ ์ ์๋ props
๊ธฐ๋ณธ ์์ฑ์ ์ถ๊ฐํ ์ ์์. ๋ถํ์ํ๊ฒ ๋ฐ๋ณต๋๋ ์์ฑ์ ์ฒ๋ฆฌํ ๋ ์ ์ฉํ๋ฐ, ๋ฒํผ ๋ฑ์ ๋ง๋ค ๋ ์ ๊ทน ํ์ฉํจ.
import styled from 'styled-components';
export const Button = styled.button.attrs({
type: 'button',
})`
border: 1px solid #888;
background: transparent;
cursor: pointer;
`;
Last updated