3. CSS in JS
Last updated
Last updated
Cascading Style Sheets HTML์ด๋ XML(SVG, XHTML ํฌํจ)๋ก ์์ฑ๋ ๋ฌธ์์ ํ์ ๋ฐฉ๋ฒ์ ๊ธฐ์ ํ๊ธฐ ์ํ ์คํ์ผ ์ํธ ์ธ์ด ์น ํ์ด์ง์ ์คํ์ผ๊ณผ ๋ ์ด์์์ ์ ์ฉํ ๋ ์ฌ์ฉ
๐๐ปโโ๏ธ๏ธ ์ฃผ์ ์ฌํญ
CSS ๋ฅผ ์ ์ฌ์ฉํ๊ธฐ ์ํด์ CSS ์์ฒด์ ๋ํด์ ์ ์๊ณ ์์ด์ผ ํฉ๋๋ค. ๋ ํผ๋ฐ์ค๋ฅผ ์ฐธ๊ณ ํ์ฌ CSS ๋ฅผ ์ ๋ฆฌํด๋ด ์๋ค. ์คํ์ผ ์์ฒด๋ ๊ต์ฅํ ๋ง๊ธฐ ๋๋ฌธ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฒ๋ค ์์ฃผ๋ก ์ฐพ์์ ์ ๋ฆฌํ์๋ฉด ์ข์ต๋๋ค. ํนํ๋ ์ ํ์, ๋ฐ์ค๋ชจ๋ธ, media query, Flexbox, Grid ์ ๋๋ ํ์์ ์ผ๋ก ์๊ณ ๊ณ์ ์ผ ํฉ๋๋ค.
๐ก ์ฐธ๊ณ ๋ ํผ๋ฐ์ค
์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ์ด์ฉํด ์คํ์ผ ์ปดํฌ๋ํธ ํํ๋ก ์ฌ์ฉํ๋ ๊ฒ์ด ํต์ฌ
Scoped styles
Critical CSS
Smarter optimisations
Package management
Non-browser styling
Thinking in components โ ์ปดํฌ๋ํธ๋ก ์ฌ๊ณ ํ ์ ์๋ค๋ ๊ฒ์ด ํต์ฌ
CSS-in-JS leverages the full power of the JavaScript ecosystem to enhance CSS.
True rules isolation
Scoped selectors
Vendor Prefixing
Code sharing
Only the styles which are currently in use on your screen are also in the DOM (react-jss).
Dead code elimination
Unit tests for CSS
2023๋ 4์ ๊ธฐ์ค์ผ๋ก styled-components > JSS > Emotion ์์
CSS-in-JS์ ์ฑ๋ฅ (2021) Why We're Breaking Up with CSS-in-JS (2022) โ CSS ํ์ผ๊ณผ JS ํ์ผ ๋ก๋ฉ์ ์ฐจ์ด
CSS๋ ๋ณ๋ ฌ๋ก ๋ก๋ฉํ ์ ์๊ณ ์๋๊ฐ ๋น ๋ฅธ๋ฐ, JS๋ฅผ ์ด์ฉํ๋ฉด ๋ก๋ฉ์ด ๋ค ๋๋๊ณ ๋์์ผ ๋ฌด์ธ๊ฐ๋ฅผ ์งํํ ์ ์์
Zero-Runtime CSS in JS
CSS๋ฅผ ํ๋ฒํ ํ ์คํธ๋ก ์์ฑ
React์ ์ข ์์ ์ด์ง ์์ง๋ง, React Styled Component๋ ์ง์ํจ
Zero-runtime Stylesheets in TypeScript
CSS๋ฅผ ์ค๋ธ์ ํธ ํํ๋ก ํํ
React์ Inline Style๊ณผ ์ ์ฌ
React์ ๋ฌด๊ดํ๊ฒ ์ฌ์ฉ ๊ฐ๋ฅ