[TIL - Styled-components]

quokkaยท2022๋…„ 1์›” 4์ผ
0

React

๋ชฉ๋ก ๋ณด๊ธฐ
7/12
post-thumbnail

๐Ÿšจ Styled-components์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์ž,,,,

๐ŸŒ€ Styled-components๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ 

  • ์ž๋™ ์ค‘์š” Css : styled-components๋Š” ํŽ˜์ด์ง€์—์„œ ๋ Œ๋”๋ง๋˜๋Š” ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์ถ”์ ํ•˜๊ณ  ์™„์ „ํžˆ ์ž๋™์œผ๋กœ ํ•ด๋‹น ์Šคํƒ€์ผ๋งŒ ์‚ฝ์ž…ํ•ฉ๋‹ˆ๋‹ค. ์ฝ”๋“œ ๋ถ„ํ• ๊ณผ ํ•จ๊ป˜ ์ด๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ํ•„์š”ํ•œ ์ตœ์†Œํ•œ์˜ ์ฝ”๋“œ๋ฅผ ๋กœ๋“œํ•จ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.
  • class ์ด๋ฆ„ ๋ฒ„๊ทธ ์—†์Œ : styled-components๋Š” ์Šคํƒ€์ผ์— ๋Œ€ํ•œ ๊ณ ์œ ํ•œ ํด๋ž˜์Šค ์ด๋ฆ„์„ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค. ์ค‘๋ณต, ์ค‘๋ณต ๋˜๋Š” ์ฒ ์ž ์˜ค๋ฅ˜์— ๋Œ€ํ•ด ๊ฑฑ์ •ํ•  ํ•„์š”๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.
  • Css์˜ ๋” ์‰ฌ์šด ์‚ญ์ œ : ํด๋ž˜์Šค ์ด๋ฆ„์ด ์ฝ”๋“œ๋ฒ ์ด์Šค์˜ ์–ด๋”˜๊ฐ€์—์„œ ์‚ฌ์šฉ๋˜๋Š”์ง€ ์—ฌ๋ถ€๋ฅผ ์•Œ๊ธฐ ์–ด๋ ค์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. styled-components๋Š” ์Šคํƒ€์ผ์˜ ๋ชจ๋“  ๋น„ํŠธ๊ฐ€ ํŠน์ • ๊ตฌ์„ฑ ์š”์†Œ์— ์—ฐ๊ฒฐ๋˜์–ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์ด๋ฅผ ๋ถ„๋ช…ํžˆ ํ•ฉ๋‹ˆ๋‹ค. ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ์‚ฌ์šฉ๋˜์ง€ ์•Š๊ณ (๋„๊ตฌ๊ฐ€ ๊ฐ์ง€ํ•  ์ˆ˜ ์žˆ์Œ) ์‚ญ์ œ๋˜๋ฉด ํ•ด๋‹น ๊ตฌ์„ฑ ์š”์†Œ์˜ ๋ชจ๋“  ์Šคํƒ€์ผ๋„ ํ•จ๊ป˜ ์‚ญ์ œ๋ฉ๋‹ˆ๋‹ค.
  • ๋‹จ์ˆœ ๋™์  ์Šคํƒ€์ผ๋ง : ์ˆ˜์‹ญ ๊ฐœ์˜ ํด๋ž˜์Šค๋ฅผ ์ˆ˜๋™์œผ๋กœ ๊ด€๋ฆฌํ•  ํ•„์š” ์—†์ด props ๋˜๋Š” ์ „์—ญ ํ…Œ๋งˆ๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ๊ตฌ์„ฑ ์š”์†Œ์˜ ์Šคํƒ€์ผ์„ ์ ์šฉํ•˜๋Š” ๊ฒƒ์ด ๊ฐ„๋‹จํ•˜๊ณ  ์ง๊ด€์ ์ž…๋‹ˆ๋‹ค.
  • ์†์‰ฌ์šด ์œ ์ง€ ๊ด€๋ฆฌ : ๊ตฌ์„ฑ ์š”์†Œ์— ์˜ํ–ฅ์„ ์ฃผ๋Š” ์Šคํƒ€์ผ์„ ์ฐพ๊ธฐ ์œ„ํ•ด ๋‹ค๋ฅธ ํŒŒ์ผ์„ ๊ฒ€์ƒ‰ํ•  ํ•„์š”๊ฐ€ ์—†์œผ๋ฏ€๋กœ ์ฝ”๋“œ๋ฒ ์ด์Šค๊ฐ€ ์•„๋ฌด๋ฆฌ ํฌ๋”๋ผ๋„ ์œ ์ง€ ๊ด€๋ฆฌ๋Š” ์ผ€์ดํฌ ์กฐ๊ฐ์ž…๋‹ˆ๋‹ค.
  • ์ž๋™ ๊ณต๊ธ‰์—…์ฒด ์ ‘๋‘์‚ฌ : Css๋ฅผ ํ˜„์žฌ ํ‘œ์ค€์œผ๋กœ ์ž‘์„ฑํ•˜๊ณ  ๋‚˜๋จธ์ง€๋Š” styled-components๊ฐ€ ์ฒ˜๋ฆฌํ•˜๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.

๐ŸŒ€ styled-components ์„ค์น˜ ๋ฐฉ๋ฒ•

$ with npm
npm install --save styled-components
$ with yarn
yarn add styled-components

์„ค์น˜ํ•œ ํ›„์—๋Š”
{
"resolutions": {
"styled-components": "^5"
}
}
package.json ํŒŒ์ผ์— ์ ์šฉ๋˜์–ด ์žˆ๋Š” ๊ฒƒ์„ ํ™•์ธ ํ•  ์ˆ˜ ์žˆ๋‹ค.

๐ŸŒ€ ์ž‘์„ฑ ๋ฐฉ๋ฒ•

render(
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;
profile
๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป ๋งค์ผ๋งค์ผ์ด ๊ธฐ๋Œ€๋˜๋Š” ๊ฐœ๋ฐœ์ž ^^

0๊ฐœ์˜ ๋Œ“๊ธ€