TIL-40 React Styled Components ๐
6659 ๋จ์ด styled componentReactReact
์ Styled Components๋ฅผ ์จ์ผํ ๊น?
- CSS ํด๋์ค ๋ช
์ ๋ํ ๊ณ ๋ฏผ์ ์ฌ์ ํ๋ค.
- ex. BEM (
.block__element--modifier
, button button--state-success
)
- ์ ํด์ง ๊ฐ์ด๋๊ฐ ์์ผ๋ฉด ๊ตฌ์กฐ๊ฐ ๋ณต์กํด์ง๋ค.
- ๋ฐฉ๋ํ ์คํ์ผ ์ ๋ณด๋ก ์ธํ ์คํฌ๋กค ์ง์ฅ๋ ์กด์ฌ
- ์ฌ์ ํ CSS ํด๋์ค๋ก ์กฐ๊ฑด๋ถ ์คํ์ผ๋ง์ ํ๊ณ ์๋ค.
- CSS ํด๋์ค๋ก ์กฐ๊ฑด๋ถ ์คํ์ผ๋ง์ ํ๋๋ผ๋ ๋์ ์ธ ๋ณํ๋ฅผ ํํํ๊ธฐ์ ํ๊ณ๊ฐ ์๋ค
- ex. 1์ด์ px ๊ฐ์ 1์ฉ ์ฆ๊ฐ โ Inline ์คํ์ผ์ ์์กดrender(
<div>
<Button>Normal</Button>
<Button width="100">Primary</Button>
</div>
);
// ๋ง์ฝ Button ์ปดํฌ๋ํธ์ ์ ๋ฌ๋ props(width)๊ฐ 200 ๋ฏธ๋ง(์กฐ๊ฑด)์ด๋ฉด
// ์ผํญ์ฐ์ฐ์ true : "palevioletred"
// ์ผํญ์ฐ์ฐ์ false : "white"
const Button = styled.button`
background: ${props => props.width < 200 ? "palevioletred" : "white"};
color: ${props => props.primary ? "white" : "palevioletred"};
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
# Nesting
```js
render(
<>
<Thing>Hello world!</Thing>
<Thing>How ya doing?</Thing>
<Thing className="something">
<span className="contents">The sun is shining...<span>
</Thing>
<div>Pretty nice day today.</div>
<Thing>Don't you think?</Thing>
<div className="something-else">
<Thing>Splendid.</Thing>
</div>
</>
)
const Thing = styled.div`
color: blue;
&:hover {
color: red;
}
#id {
div {
background: orange;
}
}
.something-else & {
border: 1px solid;
}
`
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(TIL-40 React Styled Components ๐
), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค
https://velog.io/@ssxst31/TIL-40-React-Styled-Components
์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์
๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ
์ธ ๋ฐ๊ฒฌ์ ์ ๋
(Collection and Share based on the CC Protocol.)
- ex. BEM (
.block__element--modifier
,button button--state-success
)
- ex. 1์ด์ px ๊ฐ์ 1์ฉ ์ฆ๊ฐ โ Inline ์คํ์ผ์ ์์กด
render(
<div>
<Button>Normal</Button>
<Button width="100">Primary</Button>
</div>
);
// ๋ง์ฝ Button ์ปดํฌ๋ํธ์ ์ ๋ฌ๋ props(width)๊ฐ 200 ๋ฏธ๋ง(์กฐ๊ฑด)์ด๋ฉด
// ์ผํญ์ฐ์ฐ์ true : "palevioletred"
// ์ผํญ์ฐ์ฐ์ false : "white"
const Button = styled.button`
background: ${props => props.width < 200 ? "palevioletred" : "white"};
color: ${props => props.primary ? "white" : "palevioletred"};
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
# Nesting
```js
render(
<>
<Thing>Hello world!</Thing>
<Thing>How ya doing?</Thing>
<Thing className="something">
<span className="contents">The sun is shining...<span>
</Thing>
<div>Pretty nice day today.</div>
<Thing>Don't you think?</Thing>
<div className="something-else">
<Thing>Splendid.</Thing>
</div>
</>
)
const Thing = styled.div`
color: blue;
&:hover {
color: red;
}
#id {
div {
background: orange;
}
}
.something-else & {
border: 1px solid;
}
`
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(TIL-40 React Styled Components ๐ ), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@ssxst31/TIL-40-React-Styled-Components์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค