Closed idealHyun closed 1 month ago
This PR is under visual-regression-diff building, please wait for the result.
"component level"์ ๊ฐ์กฐํ๊ณ ์ถ์ ํ๋์ ๊ธฐ์ ์ ์ธ ์ฉ์ด์ธ ๊ฒ ๊ฐ์ ์์ด๋ฅผ ์ ์งํ์์ต๋๋ค.
์ ๋ ์ ์งํ๋ ๊ฒ ์ข์ ๊ฒ ๊ฐ์์
๋ณธ๋ฌธ์์ ๋์ค๋ component๋ค์ ์ปดํฌ๋ํธ๋ก ๋ฒ์ญํ์ฌ ์ ์๋๋ฐ ์์ด๋ก ํต์ผํ๋ ๊ฒ์ด ์ข์์ง, ์ด๋๋ก ์ ์งํ๋๊ฒ ์ข์์ง ์๊ฒฌ ์ฃผ์๋ฉด ๊ฐ์ฌํ๊ฒ ์ต๋๋ค.
component๋ ์ปดํฌ๋ํธ ํ๊ธ๋ก ์ ์๊ฒ ๋ ์ข์ ๊ฒ ๊ฐ์์!
๋ณธ๋ฌธ์ ๋์ค๋ ์ปดํฌ๋ํธ ์คํ์ผ์ด ์ปดํฌ๋ํธ์ ๊ธฐ๋ณธ์ ์ธ ์คํ์ผ์ ๊ตฌ์กฐ๋ฅผ ์๋ฏธํ๋ ๊ฒ ๊ฐ์๋ฐ ๋ค๋ฅธ ๋ถ๋ค์ ์ปดํฌ๋ํธ ์คํ์ผ์ด๋ผ๋ ์ฉ์ด์ ์์ด์ ์ ํท๊ฐ๋ฆฌ์๋์ง ๊ถ๊ธํ๊ณ , ์๋ชป ๋ฒ์ญํ ๋ถ๋ถ์ด ์๋ค๋ฉด ๋ง์๋ถํ๋๋ฆฝ๋๋ค!
์ ๋ ์ฌ์ค ๊ธ ๋ด์ฉ์ด ๋ง ์์ฒญ๋๊ฒ ์ ์ดํด๊ฐ ๋์ง ์์ง๋ง,, ์ปดํฌ๋ํธ ์คํ์ผ
์ ์ ๋ ํด๋น ์ปดํฌ๋ํธ ๋ด์ ์์ฑ๋ style๋ก ์ดํดํ์ต๋๋ค.
์ ์ฝ์์ต๋๋ค. ์ด ํํธ ๋ถ๋ถ ๋ฉํ ๋์ด ์์ ์ด๋ ค์ด ๊ธ์ด๋ผ๊ณ ์๊ธฐํด์ฃผ์ จ์์๋๋ฐ.. ์๊ณ ํ์ จ์ด์!
๐ Todo
๐ Summary
[Ant Design 5.0๊ณผ "component level" CSS-in-JS ์๋ฃจ์ ]
ํด์: Ant Design์ ํ์ฌ ๋ฒ์ ๊ณผ ํ ๋ง ๋ณ์์ ๋ํด์๋ง ํด์ ๊ฐ ๊ณ์ฐ์ ์งํํ์ฌ ์ ์ฉ์ํต๋๋ค.
์ปดํฌ๋ํธ ์บ์ฑ: Ant Design ์ปดํฌ๋ํธ์ props๋ ์คํ์ผ์ ๊ตฌ์กฐ์ ์ํฅ์ ๋ฏธ์น์ง ์๊ณ , ์ต์ด ๋ง์ดํธ ์ ์คํ์ผ์ ํ ๋ฒ๋ง ์์ฑํ๊ณ ์ดํ์๋ ์บ์๋ ์คํ์ผ์ ์ฌ์ฌ์ฉํฉ๋๋ค.
์ฑ๋ฅ ๋น๊ต: Ant Design์ ์ฑ๋ฅ ํ ์คํธ์์ ๋ค๋ฅธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ๋น๊ตํ์ ๋, ์ฒซ ๋ฒ์งธ์ ๋ ๋ฒ์งธ ๋ ๋๋ง์์ ์ฑ๋ฅ ์ฐ์๋ฅผ ๋ณด์์ต๋๋ค. ํ์ง๋ง props๊ฐ ์คํ์ผ ๊ณ์ฐ์ ์ํฅ์ ๋ฏธ์น ๋๋ ์ฌ์ ํ ์ผ๋ถ ์ฑ๋ฅ ๋ถ๋ด์ด ์กด์ฌํฉ๋๋ค.
ํ๊ณ: Ant Design์ "component level" CSS-in-JS ์๋ฃจ์ ์ ์ฑ๋ฅ์ ์ด์ ์ ์ ๊ณตํ์ง๋ง, ์ผ๋ฐ์ ์ธ ์ ํ๋ฆฌ์ผ์ด์ ๊ตฌ์ถ์๋ ์ ํฉํ์ง ์์ผ๋ฉฐ, ์ฃผ๋ก ์ปดํฌ๋ํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ ์ ํฉํฉ๋๋ค.
๐ ๊ณ ๋ฏผํ๋ ๋ถ๋ถ
์ปดํฌ๋ํธ ์คํ์ผ
์ด ์ปดํฌ๋ํธ์ ๊ธฐ๋ณธ์ ์ธ ์คํ์ผ์ ๊ตฌ์กฐ๋ฅผ ์๋ฏธํ๋ ๊ฒ ๊ฐ์๋ฐ ๋ค๋ฅธ ๋ถ๋ค์ ์ปดํฌ๋ํธ ์คํ์ผ์ด๋ผ๋ ์ฉ์ด์ ์์ด์ ์ ํท๊ฐ๋ฆฌ์๋์ง ๊ถ๊ธํ๊ณ , ์๋ชป ๋ฒ์ญํ ๋ถ๋ถ์ด ์๋ค๋ฉด ๋ง์๋ถํ๋๋ฆฝ๋๋ค!