Html-react-parser: CSSToJ ๋‚ด๋ณด๋‚ด๊ธฐ

์— ๋งŒ๋“  2020๋…„ 10์›” 29์ผ  ยท  5์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: remarkablemark/html-react-parser

์ธ๋ผ์ธ CSS ๋ฌธ์ž์—ด์„ React CSS ์Šคํƒ€์ผ ๊ฐ์ฒด๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ฐพ์œผ๋ ค๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ์‹œ:

"๋ฐฐ๊ฒฝ ์ƒ‰์ƒ: ํŒŒ๋ž€์ƒ‰, ์—ฌ๋ฐฑ ์ƒ๋‹จ: 10px"

์—๊ฒŒ:

{
backgroundColor: 'ํŒŒ๋ž€์ƒ‰',
marginTop: '10px'
}

์ด๊ฒƒ์ด cssToJs ํ•จ์ˆ˜๊ฐ€ ํ•˜๋Š” ์ผ์ž„์„ ์ดํ•ดํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์–ด์จŒ๋“  ์ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ด ๊ธฐ๋Šฅ์„ ๋‚ด๋ณด๋‚ผ ์ˆ˜ ์žˆ๋‹ค๋ฉด ์ข‹์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋‚˜๋Š” attributesToProps์™€ ๊ฐ™์€ ๋ณ„๋„์˜ ๋ชจ๋“ˆ์ด ๊ฐ€์žฅ ์ข‹์„ ๊ฒƒ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

dependencies

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

cssToJs ๋ฅผ #182์˜ ๋‹ค๋ฅธ ํŒจํ‚ค์ง€ style-to-js ๋กœ ์˜ฎ๊ฒผ์Šต๋‹ˆ๋‹ค.

๊ทธ๋ž˜์„œ v0.14.2์—์„œ :

# npm
npm i [email protected]

# yarn
yarn add [email protected]

style-to-js ์ข…์†์„ฑ์„ ์„ค์น˜ํ•˜๋ฏ€๋กœ ๋‹ค์Œ์„ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

const styleToJS = require('style-to-js').default;

styleToJS('background-color: #BADA55', { reactCompat: true });

๋„์›€์ด ๋˜๋Š”์ง€ ์•Œ๋ ค์ฃผ์„ธ์š”. ์ž์„ธํ•œ ๋‚ด์šฉ์€ style-to-js README ์—์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  5 ๋Œ“๊ธ€

๋™์˜. ๋‚˜๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด ์ด ๋ฆฌํฌ์ง€ํ† ๋ฆฌ์—์„œ ๋ณต์‚ฌํ–ˆ๋Š”๋ฐ ๊ทธ๋Ÿฐ ์‹์œผ๋กœ ํ•˜๋Š” ๊ฒƒ์ด ๋งˆ์Œ์— ๋“ค์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ˆ˜์ถœ๋งŒ ๋œ๋‹ค๋ฉด ์ฐธ ์ข‹์„ํ…๋ฐ ๋ง์ด์ฃ .

cssToJs ๋ฅผ #182์˜ ๋‹ค๋ฅธ ํŒจํ‚ค์ง€ style-to-js ๋กœ ์˜ฎ๊ฒผ์Šต๋‹ˆ๋‹ค.

๊ทธ๋ž˜์„œ v0.14.2์—์„œ :

# npm
npm i [email protected]

# yarn
yarn add [email protected]

style-to-js ์ข…์†์„ฑ์„ ์„ค์น˜ํ•˜๋ฏ€๋กœ ๋‹ค์Œ์„ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

const styleToJS = require('style-to-js').default;

styleToJS('background-color: #BADA55', { reactCompat: true });

๋„์›€์ด ๋˜๋Š”์ง€ ์•Œ๋ ค์ฃผ์„ธ์š”. ์ž์„ธํ•œ ๋‚ด์šฉ์€ style-to-js README ์—์„œ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋Œ€๋‹จํ•ด. ๊ฐ์‚ฌ ํ•ด์š”!

@christianfredh ๋” ํ•„์š”ํ•œ ๊ฒƒ์ด ์žˆ์œผ๋ฉด ์•Œ๋ ค์ฃผ์‹ญ์‹œ์˜ค. ์•„๋‹ˆ๋ฉด ์ด ๋ฌธ์ œ๋ฅผ ๋‹ซ์•„์ฃผ์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?

์ง€๊ธˆ ํ…Œ์ŠคํŠธํ–ˆ๋Š”๋ฐ ์ž˜ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

ํ˜„์žฌ null/undefined๋ฅผ ํ™•์ธํ•˜๋ ค๋ฉด ์ด ๋„์šฐ๋ฏธ ํ•จ์ˆ˜๊ฐ€ ์—ฌ์ „ํžˆ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

function cssToJs(style?: string | null) {
  return styleToJS(style ?? '', { reactCompat: true })
}

๋นˆ ๊ฐ์ฒด๋ฅผ ๋ฐ˜ํ™˜ํ•˜๋Š” ์‹ค์ œ ์ฝ”๋“œ์—์„œ ์ด์— ๋Œ€ํ•œ ๊ฒ€์‚ฌ๊ฐ€ ์žˆ์Œ์„ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์–ด์ฉŒ๋ฉด ๊ทธ๊ฒƒ์ด typescript ์ธก๋ฉด์—์„œ๋„ ๋ฐ˜์˜๋  ์ˆ˜ ์žˆ์„์ง€๋„ ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค. ์–ด๋Š ์ชฝ์ด๋“  ์ž˜ ์ž‘๋™ํ•˜๋ฉฐ ๋ฌธ์ œ๋ฅผ ์ข…๋ฃŒํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰