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

[Styled-Components] Styled-Component๋ฅผ create-react-app์— ์ถ”๊ฐ€ํ•˜๊ณ  ๊ฐ„๋‹จํžˆ ์‚ฌ์šฉํ•ด๋ณด๊ธฐ

by Wonit 2020. 10. 6.

Styled-Component๋Š” ์‚ฌ์‹ค npm์— ์˜ํ•ด ์ถ”๊ฐ€๋  ์ˆ˜ ์žˆ๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ผ ๋ฟ์ด๋‹ค.

 

๊ทธ๋ž˜์„œ Create-React-App์„ ํ†ตํ•œ react ์•ฑ ์ƒ์„ฑ์—์„œ npm์„ ์ด์šฉํ•ด์„œ ์ถ”๊ฐ€ํ•ด์ฃผ๊ธฐ๋งŒ ํ•˜๋ฉด ์ค€๋น„๋Š” ๋๋‚œ๋‹ค.

์ ์šฉ ์ˆœ์„œ

์ ์šฉ ์ˆœ์„œ๋Š” ๋งค์šฐ ๊ฐ„๋‹จํ•œ ๊ณผ์ •์— ์˜ํ•ด ์ˆ˜ํ–‰๋œ๋‹ค.

  1. create-react-app์œผ๋กœ react ํ”„๋กœ์ ํŠธ ๋งŒ๋“ค๊ธฐ
  2. react ํ”„๋กœ์ ํŠธ ์ดˆ๊ธฐํ™” ์ž‘์—…
  3. npm ๋ชจ๋“ˆ๋กœ styled-components ์ถ”๊ฐ€ํ•˜๊ธฐ

create-react-app์œผ๋กœ react ํ”„๋กœ์ ํŠธ ๋งŒ๋“ค๊ธฐ

ํ”„๋กœ์ ํŠธ๋ฅผ ์ƒ์„ฑํ•˜์ž.

react ํ”„๋กœ์ ํŠธ ์ดˆ๊ธฐํ™” ์ž‘์—…

react ํ”„๋กœ์ ํŠธ๋ฅผ ๋งŒ๋“ค๋ฉด ๊ธฐ๋ณธ์ ์œผ๋กœ ์ƒ์„ฑ๋˜๋Š” svg๋‚˜ serviceworker๋“ฑ์„ ์‚ญ์ œํ•˜๊ณ  ๋‹ค์Œ๊ณผ ๊ฐ™์€์ƒํƒœ๋กœ ๋งŒ๋“ค์ž.

npm ๋ชจ๋“ˆ๋กœ styled-components ์ถ”๊ฐ€ํ•˜๊ธฐ

๊ทธ๋ฆฌ๊ณ  ํ•ด๋‹น ํ”„๋กœ์ ํŠธ์—์„œ npm ๋ชจ๋“ˆ๋กœ styled-components๋ฅผ ์ถ”๊ฐ€ํ•˜์ž.

๊ทธ๋Ÿผ ์ด์ œ ๋ชจ๋“  ์ค€๋น„๊ฐ€ ๋๋‚ฌ๋‹ค.

 

App.js์— styled-component importํ•˜๊ธฐ

๊ทธ๋ฆฌ๊ณ  ๋‘ ๊ฐœ์˜ Button์„ ๋งŒ๋“ค์–ด๋ณด์ž.

 

์—ฌ๊ธฐ์„œ ์ฃผ์˜ํ•ด์•ผํ•  ์ ์ด <button>์ด ์•„๋‹ˆ๋ผ ๋ฏธ๋ฆฌ styled-components์— ์˜ํ•ด ๋งŒ๋“ค์–ด์ง„ <Button>์„ ๋งŒ๋“ค์–ด์•ผ ํ•œ๋‹ค!

 

๊ทธ๋ฆฌ๊ณ  ์‹คํ–‰ํ•œ๋‹ค๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์€ ํ™”๋ฉด์ด ๋‚˜์˜ฌ ๊ฒƒ์ด๋‹ค.

์ด ๋ง์€ ํ˜„์žฌ Button์ด ์ •์˜๋˜์ง€ ์•Š์•„์„œ ๋ฐœ์ƒํ•˜๋Š” ๋ฌธ์ œ์ด๋‹ค.

 

๊ทธ๋Ÿผ ์šฐ๋ฆฌ๊ฐ€ ์ง€๋‚œ ์‹œ๊ฐ„์— ๋ฐฐ์› ๋˜ Template Literal์„ ๊บผ๋‚ด์•ผ ํ•  ๋•Œ ์ด๋‹ค.

 

๊ทธ๋ฆฌ๊ณ  ์•„๋ž˜์—์„œ Button ํ•จ์ˆ˜์— Tagged Template literal์„ ์ ์šฉํ•ด๋ณด์ž.

Tagged Template Literal ์ ์šฉํ•ด์„œ ํ™”๋ฉด์— ๋„์›Œ๋ณด๊ธฐ.

const Button = styled.button``;

์„ ์šฐ๋ฆฌ๊ฐ€ ์ž‘์„ฑํ–ˆ๋˜ App ์ปดํฌ๋„ŒํŠธ ์ฝ”๋“œ ์•„๋ž˜์— ์ž‘์„ฑํ•œ๋‹ค.

๊ทธ๋Ÿผ ์ผ๋‹จ ๋ฐฑํ‹ฑ ์•ˆ์—๋Š” ์•„๋ฌด ๊ฒƒ๋„ ์—†์ง€๋งŒ ํ™”๋ฉด์€ ์ •์ƒ์ ์œผ๋กœ ์ถœ๋ ฅ๋œ๋‹ค.

 

์—ฌ๊ธฐ์„œ CSS ์ฝ”๋“œ๋ฅผ ์ € ๋ฐฑํ‹ฑ ๋‚ด๋ถ€์— ๋„ฃ์–ด๋ณด์ž.

๊ทธ๋Ÿผ ์Šคํƒ€์ผ์ด ๊ฐ„๋‹จํ•˜๊ฒŒ ์ ์šฉ๋œ๋‹ค.

 

์šฐ๋ฆฐ styled-components๋ฅผ ์ด์šฉํ•ด์„œ ์ปดํฌ๋„ŒํŠธ์— ์Šคํƒ€์ผ๋ง์„ ํ–ˆ๋‹ค.

 

์ •๋ฆฌํ•ด๋ณด์ž.

์ •๋ฆฌํ•˜๋ฉด ์šฐ๋ฆฐ react-app์— styled-coomp๋ฅผ ์ถ”๊ฐ€ํ•ด Tagged Template Literal ๋ฌธ๋ฒ•์œผ๋กœ ์Šคํƒ€์ผ๋ง์„ Button์— ์ถ”๊ฐ€ํ–ˆ๋‹ค.

 

Button์€ ์‚ฌ์‹ค Styled-comp์—์„œ ๋ฏธ๋ฆฌ ์ •์˜๋ฅผ ํ•ด ๋†“์€ ๊ฐ์ฒด์ด์ง€๋งŒ ์šฐ๋ฆฌ๋Š” ์•ž์œผ๋กœ ๋‹ค์–‘ํ•œ ๊ฐ์ฒด๋ฅผ ๋งŒ๋“ค์–ด ๋ฐฐ์น˜ํ•ด์•ผ ํ•œ๋‹ค.

 

์‚ฌ์šฉ์ž ์ •์˜ ์ปดํฌ๋„ŒํŠธ ์Šคํƒ€์ผ๋ง

๊ทธ๋Ÿผ ์šฐ๋ฆฌ๊ฐ€ ๋งŒ๋“  Tag๋ฅผ ์Šคํƒ€์ผ๋ง ํ•ด๋ณด์ž.

์šฐ๋ฆฌ์˜ ๋ฒ„ํŠผ์„ div ํƒœ๊ทธ๋กœ ๊ฐ์‹ธ์„œ ๋ฉ‹์ง„ boundry๋ฅผ ๊ฐ–๊ฒŒ ํ•ด๋ณผ ๊ฒƒ์ด๋‹ค.

 

ํ•˜์ง€๋งŒ div๋ฅผ ์Šคํƒ€์ผ๋ง ํ•˜๋ ค๋ฉด css ํŒŒ์ผ์„ import ํ•˜๊ฑฐ๋‚˜ ํƒœ๊ทธ ๋‚ด์˜ style ์†์„ฑ์„ ์ด์šฉํ•ด์•ผํ•œ๋‹ค.

 

๊ทธ๋Ÿผ styled-component๋ฅผ ์ด์šฉํ•˜๋Š” ์˜๋ฏธ๊ฐ€ ์—†์ง€ ์•Š์„๊นŒ?

 

ํ•˜์ง€๋งŒ ๋‹คํ–‰์ด๋„ styled-component๋Š” ๊ทธ๋Ÿฐ ๊ฒƒ์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•œ๋‹ค.

์œ„์˜ ์ฝ”๋“œ ์ฒ˜๋Ÿผ

const ์ปดํฌ๋„ŒํŠธ = styled.ํƒœ๊ทธ `
    css ๋ฌธ๋ฒ•...
`

์„ ํ•œ๋‹ค๋ฉด ์šฐ๋ฆฌ๊ฐ€ ์ •์˜ํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ ๋˜ํ•œ ์Šคํƒ€์ผ์„ ๊ฐ–๊ฒŒ ๋œ๋‹ค.


์ด๋ ‡๊ฒŒ ์˜ค๋Š˜์€ ๊ฐ„๋‹จํ•˜๊ฒŒ Styled-component์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์•˜๋‹ค.

 

์ด์ œ ๋Œ€์ถฉ ์–ด๋–ป๊ฒŒ ๋™์ž‘ํ•˜๊ณ  ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š”์ง€์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์•˜์œผ๋‹ˆ ๋‹ค์Œ ์‹œ๊ฐ„๋ถ€ํ„ฐ๋Š” Styled-component์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ๋“ค๊ณผ ํ‚ค์›Œ๋“œ ์ค‘์‹ฌ์œผ๋กœ ๋ธ”๋กœ๊ทธ ๊ธ€์„ ์จ๋ณด๋ ค ํ•œ๋‹ค.

๋Œ“๊ธ€