์ธ๋ผ์ธ CSS ๋ฌธ์์ด์ React CSS ์คํ์ผ ๊ฐ์ฒด๋ก ๋ณํํ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฐพ์ผ๋ ค๊ณ ํฉ๋๋ค. ์์:
"๋ฐฐ๊ฒฝ ์์: ํ๋์, ์ฌ๋ฐฑ ์๋จ: 10px"
์๊ฒ:
{
backgroundColor: 'ํ๋์',
marginTop: '10px'
}
์ด๊ฒ์ด cssToJs ํจ์๊ฐ ํ๋ ์ผ์์ ์ดํดํฉ๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ด์จ๋ ์ด ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ๊ธฐ ๋๋ฌธ์ ์ด ๊ธฐ๋ฅ์ ๋ด๋ณด๋ผ ์ ์๋ค๋ฉด ์ข์ ๊ฒ์ ๋๋ค. ๋๋ attributesToProps์ ๊ฐ์ ๋ณ๋์ ๋ชจ๋์ด ๊ฐ์ฅ ์ข์ ๊ฒ์ด๋ผ๊ณ ์๊ฐํฉ๋๋ค.
๋์. ๋๋ ๊ธฐ๋ณธ์ ์ผ๋ก ์ฌ์ฉํ๊ธฐ ์ํด ์ด ๋ฆฌํฌ์งํ ๋ฆฌ์์ ๋ณต์ฌํ๋๋ฐ ๊ทธ๋ฐ ์์ผ๋ก ํ๋ ๊ฒ์ด ๋ง์์ ๋ค์ง ์์ต๋๋ค. ์์ถ๋ง ๋๋ค๋ฉด ์ฐธ ์ข์ํ ๋ฐ ๋ง์ด์ฃ .
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 ์ธก๋ฉด์์๋ ๋ฐ์๋ ์ ์์์ง๋ ๋ชจ๋ฅด๊ฒ ์ต๋๋ค. ์ด๋ ์ชฝ์ด๋ ์ ์๋ํ๋ฉฐ ๋ฌธ์ ๋ฅผ ์ข ๋ฃํ๊ฒ ์ต๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
cssToJs
๋ฅผ #182์ ๋ค๋ฅธ ํจํค์งstyle-to-js
๋ก ์ฎ๊ฒผ์ต๋๋ค.๊ทธ๋์ v0.14.2์์ :
style-to-js
์ข ์์ฑ์ ์ค์นํ๋ฏ๋ก ๋ค์์ ์ํํ ์ ์์ต๋๋ค.๋์์ด ๋๋์ง ์๋ ค์ฃผ์ธ์. ์์ธํ ๋ด์ฉ์
style-to-js
README ์์ ํ์ธํ ์ ์์ต๋๋ค.