๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
  • ์žฅ์›์ต ๊ธฐ์ˆ ๋ธ”๋กœ๊ทธ
๐Ÿ“บ Front End/- React, Next.js

[Styled-Components] React์˜ Styled-Components๋ž€ ๋ฌด์—‡์ผ๊นŒ?

by Wonit 2020. 10. 6.

์ผ๋ฐ˜์ ์œผ๋กœ ์šฐ๋ฆฌ๊ฐ€ HTML Element๋ฅผ ์Šคํƒ€์ผ๋งํ•  ๋•Œ๋Š” Css ํŒŒ์ผ์„ importํ•˜์—ฌ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ด์šฉํ–ˆ์—ˆ๋‹ค.


์ด ๋ฐฉ๋ฒ•์€ ํ˜„์žฌ ๋งŽ์€ ๋ถ€๋ถ„์˜ ์›น ์„œ๋น„์Šค์— ์กด์žฌํ•˜๋Š” ๋ฐฉ๋ฒ•์ด๊ณ  ๋งค์šฐ ๋ฉ‹์ง€๊ณ  ์ž˜ ์ •๋ฆฌ๋œ ๋ฐฉ๋ฒ•์ด๋‹ค.


ํ•˜์ง€๋งŒ ์ ์–ด๋„ React์—์„œ๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ์Šคํƒ€์ผ๋ž‘ํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ๋‹ค๋ฅธ ๋„๊ตฌ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ๋”์šฑ ์ถ”์ฒœ๋œ๋‹ค.

Styling In React

๋ฆฌ์•กํŠธ์—์„œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์Šคํƒ€์ผ๋ง ํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ํฌ๊ฒŒ 3๊ฐ€์ง€๊ฐ€ ์žˆ๋‹ค.

  1. Sass
  2. Css Module
  3. styled-components

๊ทธ ์ค‘์— ์šฐ๋ฆฌ๋Š” React ๊ณต์‹ ํ™ˆํŽ˜์ด์ง€์—์„œ ๊ถŒ์žฅํ•˜๋Š” Styled-Component์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณผ ๊ฒƒ์ด๋‹ค.

React ๊ณต์‹ ํ™ˆํŽ˜์ด์ง€ QnA CSS

๋˜ํ•œ ๊ฐ€์žฅ ์ธ๊ธฐ์žˆ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

https://www.npmtrends.com

styled-component์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๊ธฐ ์ „์— ๊ฐ„๋‹จํ•˜๊ฒŒ 3๊ฐ€์ง€์˜ ์ฐจ์ด์— ๋Œ€ํ•ด ํ‘œ๋กœ ์ •๋ฆฌํ•ด๋ณด์ž.

์ด๋ฆ„, ํŠน์ง•, ์ถ”์ฒœ ์‚ฌ์ดํŠธ

์ด๋ฆ„ ํŠน์ง• ์ถ”์ฒœ ์‚ฌ์ดํŠธ
Sass CSS pre-processor๋กœ ๋ณต์žกํ•œ ์ž‘์—…์ด ์‰ฌ์›Œ์ง ๋ฒจ๋กœํผํŠธ๋‹˜์˜ Sass gitboot
Css Module css์˜ classname์— ๋Œ€ํ•œ ์ค‘๋ณต ๊ฑฑ์ •์„ ์ค„์–ด์คŒ ๋ฒจ๋กœํผํŠธ๋‹˜์˜ css module gitbook
styled-component Css-in-js๋ฅผ ์‚ฌ์šฉํ•œ ๊ธฐ์ˆ ๋กœ ๊ฐ€์žฅ ์ธ๊ธฐ๊ฐ€ ๋งŽ์Œ ํ•ด๋‹น ๋ธ”๋กœ๊ทธ styled-components ์นดํ…Œ๊ณ ๋ฆฌ

styled-components

styled-components๋Š” ์ •ํ™•ํžˆ CSS-in-js ๋ผ๋Š” ๊ธฐ์ˆ ์„ ์‚ฌ์šฉํ•œ๋‹ค.

 

์ด๋Š” JS ์ฝ”๋“œ ๋‚ด์— CSS๋ฅผ ์ž‘์„ฑํ•˜๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•˜๋Š”๋ฐ, ์œ„์—์„œ ๋ดค๋“ฏ React์—์„œ ๊ฐ€์žฅ ๊ถŒ๊ณ ํ•˜๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค.

 

์ด๋Ÿฐ CSS-In-Js ์—๋Š” ํฌ๊ฒŒ 3๊ฐ€์ง€๊ฐ€ ์žˆ๋‹ค.

  1. emotion
  2. spring
  3. styled-components

์˜ค๋Š˜์€ CSS-In-JS์˜ styled-components๊ฐ€ ๋ฌด์—‡์ธ์ง€์— ๋Œ€ํ•ด์„œ ๊ฐ„๋žตํ•˜๊ฒŒ ์•Œ๊ฒŒ ๋˜์—ˆ๊ณ  ๋‹ค์Œ ์‹œ๊ฐ„๋ถ€ํ„ฐ styled-components์— ํ•„์š”ํ•œ ๊ธฐ์ดˆ ์ง€์‹๊ณผ styled-components์— ์‚ฌ์šฉ๋ฒ•์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์ž.

๋Œ“๊ธ€