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

[Styled-Components] Styled-Components๋ฅผ ๋ฐฐ์šฐ๊ธฐ ์œ„ํ•ด ์•Œ์•„์•ผ ํ•˜๋Š” Template Literal

by Wonit 2020. 10. 6.

์˜ค๋Š˜์€ Styled-component๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด ๊ฐ€์žฅ ๊ธฐ๋ณธ์ด ๋˜๋Š” Js ๋ฌธ๋ฒ•์ธ Template Literal์— ๋Œ€ํ•ด์„œ ๊ฐ€๋ณ๊ฒŒ ์•Œ์•„๋ณด๊ณ  ๋„˜์–ด๊ฐˆ ๊ฒƒ์ด๋‹ค.

Template Literal

 

ํ…œํ”Œ๋ฆฟ ๋ฆฌํ„ฐ๋Ÿด์€ ๋‚ด์žฅ๋œ ํ‘œํ˜„์‹์„ ํ—ˆ์šฉํ•˜๋Š” ๋ฌธ์ž์—ด ๋ฆฌํ„ฐ๋Ÿด์ด๋‹ค.

 

์—ฌ๊ธฐ์„œ ๋ฌธ์ž์—ด ๋ฆฌํ„ฐ๋Ÿด์€ ๋ฌด์—‡์ด๋ƒ?

 

๊ธฐ๋ณธ์  ์‚ฌ์šฉ๋ฒ•

์—ฌ๊ธฐ์„œ ๋”ฐ์˜ดํ‘œ๋ฅผ ์‚ฌ์šฉํ•˜๋Š”๋ฐ ์šฐ๋ฆฌ๊ฐ€ ์‚ฌ์šฉํ•˜๋Š” '' ๊ฐ€ ์•„๋‹Œ ``๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.

 

์ด๋Š” ๋”ฐ์˜ดํ‘œ๋ผ๊ณ  ํ•˜์ง€ ์•Š๊ณ  ๋ฐฑํ‹ฑ (grave accent)์„ ์ด์šฉํ•œ๋‹ค.

 

ํ…œํ”Œ๋ฆฟ ๋ฆฌํ„ฐ๋Ÿด์€ ${expression}๋กœ ํ‘œํ˜„ํ•  ์ˆ˜ ์žˆ๊ณ , ํ‘œํ˜„์‹๊ณผ ๊ทธ ์‚ฌ์ด ํ…์ŠคํŠธ๋Š” ํ•จ์ˆ˜๋กœ ์ „๋‹ฌ๋œ๋‹ค.

์ผ๋ฐ˜ ๋ฌธ์ž์—ด

const name = "jang";
const message = `welcome ${name}`;

console.log(message);

// "hello jang"

์ฒ˜๋Ÿผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์†Œ๋ฆฌ๋‹ค.

๊ฐ์ฒด

ํ•˜์ง€๋งŒ ์ด๋Ÿฐ Template Literal์˜ ${expression}์— ๋ฌธ์ž์—ด์ด๋‚˜ ์ˆซ์ž์™€ ๊ฐ™์€ ํƒ€์ž…์ด ์•„๋‹Œ ๊ฐ์ฒด๋ฅผ ๋„ฃ์–ด๋„ ๋™์ž‘ํ•œ๋‹ค.

const user = { id: 1, name: "jang", type: "programmer" };
const tl = `${user}`

console.log(tl);

// "[object Object]"

ํ•จ์ˆ˜

๊ฐ์ฒด๊ฐ€ ๋“ค์–ด๊ฐ€๋ฉด ํ•จ์ˆ˜๋„ ๋“ค์–ด๊ฐ€์ง€ ์•Š์„๊นŒ?

 

์ •๋‹ต์ด๋‹ค.

const my_func = () => "hello";
const fn = `${my_func}`;

console.log(fn);
// () => "hello"

Taggged Template Literal

Template Literal์„ ์‚ฌ์šฉํ•˜๊ณ  ๋‚ด๋ถ€์˜ js ๊ฐ’์„ ์กฐํšŒํ•  ๋•Œ๋Š” Tagged Template Literal์„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

 

์šฐ๋ฆฌ๊ฐ€ styled-components๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ๋ฐ”๋กœ tagged template literal์ด๋‹ค.

 

๋Œ€๋ถ€๋ถ„์˜ styled-component ์ฝ”๋“œ๋Š”

// styled-components
const Button = styled.button`
  border-radius: 50px;
  padding: 5px;
  min-width: 120px;
  color: wheat;
  font-weight: 600;
  -webkit-appearance: none;
  cursor: pointer;
`;

๊ณผ ๊ฐ™์€ ํ˜•์‹์œผ๋กœ ์‚ฌ์šฉ๋œ๋‹ค.

 

์—ฌ๊ธฐ์„œ button์— ํ•ด๋‹นํ•˜๋Š” ๊ฒƒ์€ ์‚ฌ์‹ค ํ•จ์ˆ˜์ด๋‹ค.

 

์—ฌ๊ธฐ์„œ ํ•จ์ˆ˜์™€ ํƒœ๊ทธ๋ฅผ ํ•จ๊ป˜ ๋ถ™์—ฌ ์‚ฌ์šฉํ•ด๋ณด์ž.

const tag = (...args) => console.log(args);
tag`my name is jang`;

// [["my name is jang"], raw: ["my name is jang"]];

๊ณผ ๊ฐ™์ด ์ถœ๋ ฅ์ด ๋œ๋‹ค.

 

์—ฌ๊ธฐ์„œ ์ค‘์š”ํ•œ ๊ฒƒ์€ ๋ฐฑํ‹ฑ์— ์žˆ๋Š” ๋ฌธ์ž์—ด์ด๋‹ˆ ...argsrest ์—ฐ์‚ฐ์— ๋Œ€ํ•ด์„œ๋Š” ์‹ ๊ฒฝ์“ฐ์ง€ ๋ง์ž.


๊ทธ๋Ÿผ ์ค‘์š”ํ•œ ๊ฒƒ์€ raw์ธ๋ฐ raw์— ์šฐ๋ฆฌ๊ฐ€ ๋„ฃ์—ˆ๋˜ ๋ฌธ์ž์—ด my name... ์ด ์ถœ๋ ฅ๋œ๋‹ค.

 

๊ทธ๋Ÿผ ์ €๊ธฐ raw๋ฅผ ์•Œ์•„๋ณด์ž.

raw

ํ…œํ”Œ๋ฆฟ ๋ฆฌํ„ฐ๋Ÿด๋กœ a, b๋ฅผ ๋„ฃ์–ด๋ณด์ž.

const a = 'my';
const b = 'name';
const c = 'is';
const d = 'jang';

tag`${a} ${b} ${c} ${d}`;

// [[' ', ' ', ' ', ' ', rawA: ['my', 'name', 'is', 'jang'], 'my', 'name', 'is', 'jang']

๊ฐ€ ์ถœ๋ ฅ๋œ๋‹ค.

์กฐ๊ธˆ ๋ณต์žกํ•ด๋ณด์ด์ง€๋งŒ, ์‰ฝ๊ฒŒ ๋ง ํ•ด์„œ a์™€ b, c, d๊ฐ€ ๋“ค์–ด๊ฐ„๋‹ค๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ${} ๊ทธ๋ฃน์˜ ๊ฐ’๋“ค์ด ๋“ค์–ด๊ฐ„๋‹ค๋Š” ๊ฒƒ์ด๋‹ค.

์ด๋ ‡๊ฒŒ Tagged Template Literal์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์•˜๋Š”๋ฐ, ์ด ๋ฌธ๋ฒ• ๊ตฌ์กฐ๋กœ styled-components๊ฐ€ ๋™์ž‘ํ•œ๋‹ค๋Š” ๊ฒƒ๋งŒ ์•Œ๋ฉด ๋œ๋‹ค.

 

์ด๋ฒˆ ์‹œ๊ฐ„์—์„œ ์•Œ์•„๋ณด๊ณ ์ž ํ–ˆ๋˜ ๊ฒƒ์€ ์–ด๋–ค ๊ตฌ์กฐ๋กœ ๋™์ž‘ํ•˜๋Š”์ง€์— ๋Œ€ํ•ด์˜€๋‹ค.

 

๋ณธ๊ฒฉ์ ์œผ๋กœ styled-components์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด๊ธฐ ์ „์— ๊ฐ€๋ณ๊ฒŒ ๊ตฌ์กฐ์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์•˜์œผ๋‹ˆ ๋‹ค์Œ ์‹œ๊ฐ„์— tag``๊ณผ ๊ฐ™์€ ๋ฌธ๋ฒ•์ด ๋‚˜์˜ค๋”๋ผ๋„ ๋‹นํ™ฉํ•˜์ง€ ๋ง์ž.

๋Œ“๊ธ€