๐Ÿง‘‍๐Ÿ’ป๊ฐœ๋ฐœ_Deep Dive/React

antd์— styled-components ๊ฐ„๋‹จ ์ ์šฉ

Daisy.lee 2022. 2. 8. 15:01

์ด์Šˆ

antd๋กœ ๋ถˆ๋Ÿฌ์˜จ ์ปดํฌ๋„ŒํŠธ์— styled-components๋ฅผ ์ ์šฉํ•  ๋•Œ, ์ด๋ฏธ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ƒ๋‹จ์— ์ •์˜๋˜์–ด ์žˆ์–ด์„œ ๋™์ผํ•œ ๋ณ€์ˆ˜๋ช…์„ ๊ฐ€์ง„ styled-components๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์—†์–ด์„œ ๋‚œ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ฐ™์€ ์ด๋ฆ„์„ ์“ฐ์ž๋‹ˆ ์ƒ๋‹จ์— ์žˆ์–ด์„œ ์ค‘๋ณต๋˜๊ณ , ๋‹ค๋ฅธ ์ด๋ฆ„์„ ์“ฐ์ž๋‹ˆ ์ด๋ฏธ ์ •ํ•ด์ ธ ์žˆ๋Š” antd ์ปดํฌ๋„ŒํŠธ๋ช…์„ ํ•จ๋ถ€๋กœ ๋ฐ”๊พธ๋ฉด ์•ˆ ๋˜๋Š”๊ฑฐ ์•„๋‹Œ๊ฐ€...? ๋ผ๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.

ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•

ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์€ ์˜์™ธ๋กœ ๊ฐ„๋‹จํ–ˆ๋Š”๋ฐ, styled(์ปดํฌ๋„ŒํŠธ) ์ฒ˜๋Ÿผ ์‚ฌ์šฉํ•ด์„œ ๊ฐ€์ ธ๋‹ค์จ๋„ ์ƒ๊ด€์—†์—ˆ์Šต๋‹ˆ๋‹ค! styled-component๋กœ ํ™œ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ๋Š” 1. ์Šคํƒ€์ผ๋ง๋œ ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ๋งŒ๋“ค์–ด์„œ ๊ฐ€์ ธ๋‹ค ์“ฐ๊ธฐ 2. ์ด๋ฏธ ๋งŒ๋“ค์–ด์ง„ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์Šคํƒ€์ผ๋งํ•ด์„œ ๊ฐ€์ ธ๋‹ค ์“ฐ๊ธฐ ๋กœ ๋‚˜๋ˆ ๋ณผ ์ˆ˜ ์žˆ๊ฒ ์Šต๋‹ˆ๋‹ค. 1๋ฒˆ ๋ฐฉ๋ฒ•์€ styled.ํƒœ๊ทธ๋ช… ์ฒ˜๋Ÿผ ์ž‘์„ฑํ•˜๊ณ , 2๋ฒˆ ๋ฐฉ๋ฒ•์€ styled(์ปดํฌ๋„ŒํŠธ๋ช…) ์ฒ˜๋Ÿผ ํ•จ์ˆ˜์˜ parameter๋กœ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ „๋‹ฌํ•˜์—ฌ ์Šคํƒ€์ผ๋งํ•ฉ๋‹ˆ๋‹ค.

 

๊ทธ๋ฆฌ๊ณ  antd๋ฅผ ์ ์šฉํ•  ๋•Œ๋„ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ 2๋ฒˆ ๋ฐฉ๋ฒ•, ์ฆ‰ ์ด๋ฏธ ๋งŒ๋“ค์–ด์ง„ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์Šคํƒ€์ผ๋งํ•œ ์ƒˆ๋กœ์šด ์ปดํฌ๋„ŒํŠธ๋ช…์„ ์‚ฌ์šฉํ•ด๋„ ๋ฌด๋ฐฉํ•˜๋‹ค๋Š” ๊ฒƒ์„ ์•Œ์•˜์Šต๋‹ˆ๋‹ค. (๋ฌด์กฐ๊ฑด antd์—์„œ ์ •ํ•œ ์ปดํฌ๋„ŒํŠธ๋ช…์„ ๊ทธ๋Œ€๋กœ ์จ์•ผ๋œ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ๋Š”๋ฐ, ๊ทธ๊ฒŒ ์•„๋‹ˆ์—ˆ์Šต๋‹ˆ๋‹ค.)