4. styled components

์ปดํฌ๋„ŒํŠธ๋กœ ์ƒ๊ฐํ•˜๊ธฐ

JSS๋Š” CSS๋ณด๋‹ค ๋” ๊ฐ•๋ ฅํ•œ ์ถ”์ƒํ™”์ด๋‹ค.

JS๋ฅผ ์‚ฌ์šฉํ•ด ์Šคํƒ€์ผ์„ ์„ ์–ธ์ ์ด๊ณ  ์œ ์ง€๋ณด์ˆ˜ ๊ฐ€๋Šฅํ•œ ๋ฐฉ์‹์œผ๋กœ ์„ค๋ช…ํ•œ๋‹ค.

์ธ๋ผ์ธ ์Šคํƒ€์ผ์ด ๋™์ž‘ํ•˜๋Š” ๋ฐฉ๋ฒ•

const textStyles = {
  color: white,
  backgroundColor: black
}

<p style={textStyles}>inline style!</p>

๋ธŒ๋ผ์šฐ์ €์—์„œ DOM๋…ธ๋“œ๋ฅผ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์—ฐ๊ฒฐํ•œ๋‹ค.

<p style="color: white; backgrond-color: black;">inline style!</p>

CSS in JS๊ฐ€ ๋™์ž‘ํ•˜๋Š” ๋ฐฉ๋ฒ•

import styled from 'styled-components';

const Text = styled.div`
  color: white,
  background: black
`

<Text>Hello CSS-in-JS</Text>

๋ธŒ๋ผ์šฐ์ €์—์„œ DOM๋…ธ๋“œ๋ฅผ ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์—ฐ๊ฒฐํ•œ๋‹ค.

์ฐจ์ด์ 

CSS in JS๋Š” DOM์˜ ์ƒ๋‹จ์— <style> ํƒœ๊ทธ๋ฅผ ์ถ”๊ฐ€ํ–ˆ๊ณ ,

์ธ๋ผ์ธ ์Šคํƒ€์ผ์€ DOM ๋…ธ๋“œ์— ์†์„ฑ์œผ๋กœ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค.

์™œ ์ด ๋ฌธ์ œ๊ฐ€ ์ค‘์š”ํ• ๊นŒ?

CSS in JS๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์†์‰ฝ๊ฒŒ ๋ชจ๋“  CSS์˜ ํž˜์„ ๊ทธ๋Œ€๋กœ ๋ˆ„๋ฆด ์ˆ˜ ์žˆ๋‹ค.

์‹ค์ œ CSS๊ฐ€ ์ƒ์„ฑ๋˜๊ธฐ ๋•Œ๋ฌธ์— ๋ชจ๋“  ๋ฏธ๋””์–ด์ฟผ๋ฆฌ, ์ˆ˜๋„ ์„ ํƒ์ž๋„ ์‚ฌ์šฉ ๊ฐ€๋Šฅ.

์—ฌ๋Ÿฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์†Œ๊ฐœ

https://d0gf00t.tistory.com/22arrow-up-right

CSS-in-JS์™€ ์„ฑ๋Šฅ

Last updated