[React] CDD

์œ ์•„ํ˜„ยท2022๋…„ 12์›” 22์ผ
0

React

๋ชฉ๋ก ๋ณด๊ธฐ
9/28
post-thumbnail

โค๏ธโ€๐Ÿ”ฅ CDD | Component Driven Development

  • ๋ถ€ํ’ˆ ๋‹จ์œ„๋กœ UI ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค์–ด ๋‚˜๊ฐ€๋Š” ๊ฐœ๋ฐœ, ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ชจ๋“ˆ ๋‹จ์œ„๋กœ ๊ฐœ๋ฐœํ•ด UI๋ฅผ ๊ตฌ์ถ• ๋„๋‹ฌํ•˜๋Š” ๊ฐœ๋ฐœ ๋ฐ ์„ค๊ณ„ ๋ฐฉ๋ฒ•๋ก ์ด๋‹ค. ๊ธฐ๋ณธ์ ์ธ ์ปดํฌ๋„ŒํŠธ ๋‹จ์œ„์—์„œ๋ถ€ํ„ฐ ๋ทฐ๊นŒ์ง€ ๊ตฌ์„ฑ์„ ์œ„ํ•ด์„œ ๊ฐ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ ์ง„์ ์œผ๋กœ ์กฐ๋ฆฝ์‹œ์ผœ ๋‚˜๊ฐ€๋Š” ์ƒํ–ฅ์ ์ธ ์„ฑํ–ฅ์„ ๋„๊ณ  ์žˆ๋‹ค.

โค๏ธโ€๐Ÿ”ฅ ๊ตฌ์กฐ์ ์ธ CSS ์ž‘์„ฑ ๋ฐฉ๋ฒ•์˜ ๋ฐœ์ „

  • ์ธํ„ฐ๋„ท์ด ๋งŒ๋“ค์–ด์ง„ ์ดํ›„ ๊ธฐ์ˆ ์˜ ๋ฐœ๋‹ฌ๊ณผ ์‚ฌ์šฉ์ž๋“ค์ด ๋‹ค์–‘ํ•œ ํ™˜๊ฒฝ์—์„œ ์ธํ„ฐ๋„ท์„ ์‚ฌ์šฉํ•˜๊ธฐ ์‹œ์ž‘ํ–ˆ๋‹ค. ์ด์— ๋”ฐ๋ผ์„œ CSS์˜ ์ž‘์„ฑ ๋ฐฉ์‹๋„ ๋ฐœ์ „ํ•˜์˜€๋Š”๋ฐ, ํ”„๋กœ์ ํŠธ์˜ ๊ทœ๋ชจ๋‚˜ ๋ณต์žก๋„๊ฐ€ ์ปค์ง€๋ฉด์„œ ๊ฐ™์ด ์ž‘์—…ํ•˜๋Š” ํŒ€์›์˜ ์ˆ˜๋„ ์ฆ๊ฐ€ํ•จ์— ๋”ฐ๋ผ CSS๋ฅผ ์ž‘์„ฑํ•  ๋•Œ ์ผ๊ด€์ ์ธ ํŒจํ„ด์ด ์กด์žฌํ•˜์ง€ ์•Š๋‹ค๋Š” ๊ฒƒ์ด ํฐ ๊ฑธ๋ฆผ๋Œ์ด๊ฐ€ ๋˜์—ˆ๋‹ค. ๋˜ํ•œ ๋‹ค์–‘ํ•œ ๋””๋ฐ”์ด์Šค๋“ค์˜ ๋“ฑ์žฅ์œผ๋กœ ์›น์‚ฌ์ดํŠธ๋“ค์ด ๋‹ค์–‘ํ•œ ๋””์Šคํ”Œ๋ ˆ์ด๋ฅผ ์ปค๋ฒ„ํ•ด์•ผ ๋๊ธฐ ๋•Œ๋ฌธ์— CSS๋Š” ๋”์šฑ ๋ณต์žกํ•ด์ง€๊ฒŒ ๋๋‹ค. ๋”ฐ๋ผ์„œ CSS ์ž‘์—…์„ ํšจ์œจ์ ์œผ๋กœ ํ•˜๊ธฐ ์œ„ํ•ด์„œ ๊ตฌ์กฐํ™”๋œ CSS์˜ ํ•„์š”์„ฑ์ด ๋Œ€๋‘๋˜์—ˆ๊ณ , CSS๋ฅผ ๊ตฌ์กฐํ™”ํ•˜๋Š” ์ด๋Ÿฌํ•œ ๋ฌธ์ œ์ ๋“ค์„ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•œ CSS ์ „์ฒ˜๋ฆฌ๊ธฐ ๋ผ๋Š” ๊ฐœ๋…์ด ๋“ฑ์žฅํ–ˆ๋‹ค.

โค๏ธโ€๐Ÿ”ฅ CSS ์ „์ฒ˜๋ฆฌ๊ธฐ

  • CSS๊ฐ€ ๊ตฌ์กฐ์ ์œผ๋กœ ์ž‘์„ฑ๋  ์ˆ˜์žˆ๊ฒŒ ๋„์›€์„ ์ฃผ๋Š” ๋„๊ตฌ, ์ „์ฒ˜๋ฆฌ๊ธฐ์˜ ์ž์‹ ๋งŒ์˜ ํŠน๋ณ„ํ•œ syntax๋ฅผ ๊ฐ€์ง€๊ณ  CSS๋ฅผ ์ƒ์„ฑํ•˜๋„๋ก ํ•˜๋Š” ํ”„๋กœ๊ทธ๋žจ์ด๋‹ค. CSS ๋ฌธ์„œ๋ฅผ ์ž‘์„ฑํ•  ๋•Œ๋Š” ๋ฒˆ๊ฑฐ๋กญ๊ฑฐ๋‚˜ ๋งŽ์€ ๋ฐ˜๋ณต์ ์ธ ์ž‘์—…์„ ์š”๊ตฌํ•œ๋‹ค. (ex: Color ๊ฐ’ ์ฐพ๊ธฐ, tag ๋‹ซ๊ธฐ) ์ด๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ํด๋ž˜์Šค์˜ ์ƒ์†๊ณผ ๊ฐ™์€ ์‚ฌํ•ญ์œผ๋กœ ์ ์  CSS ๋ฌธ์„œ๋Š” ์–‘์ด ๋งŽ์•„์ง€๊ณ  ์ด๋กœ ์ธํ•ด ์ดํ›„ ์œ ์ง€๊ด€๋ฆฌ์— ๋งŽ์€ ์˜ํ–ฅ์„ ๋ผ์นœ๋‹ค. ์ด๋Ÿฐ CSS ๋ฌธ์ œ์ ๋“ค์„ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ฐœ๋…์„ ํ™œ์šฉํ•œ CSS ์ „์ฒ˜๋ฆฌ๊ธฐ๋ฅผ ํ†ตํ•ด ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋‹ค.

โค๏ธโ€๐Ÿ”ฅ SASS

  • CSS๋ฅผ ํ™•์žฅํ•ด ์ฃผ๋Š” ์Šคํฌ๋ฆฝํŒ… ์–ธ์–ด
  • CSS๋ฅผ ๋งŒ๋“ค์–ด ์ฃผ๋Š” ์–ธ์–ด๋กœ, JS์ฒ˜๋Ÿผ ํŠน์ • ์†์„ฑ ๊ฐ’์„ ๋ณ€์ˆ˜๋กœ ์„ ์–ธํ•ด ํ•„์š”ํ•œ ๊ณณ์— ์„ ์–ธํ•œ ๋ณ€์ˆ˜๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์“ธ ์ˆ˜ ์žˆ๊ณ , ๋ฐ˜๋ณต๋˜๋Š” ์ฝ”๋“œ๋ฅผ ํ•œ ๋ฒˆ์˜ ์„ ์–ธ์œผ๋กœ ์—ฌ๋Ÿฌ ๋ฒˆ ์žฌ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•œ ๊ธฐ๋Šฅ์„ ๊ฐ€์กŒ๋‹ค.
  • SCSS ์ฝ”๋“œ๋ฅผ ์ฝ์–ด์„œ ์ „์ฒ˜๋ฆฌํ•œ ๋‹ค์Œ ์ปดํŒŒ์ผ ํ›„, ์ „์—ญ CSS ๋ฒˆ๋“ค ํŒŒ์ผ์„ ๋งŒ๋“ค์–ด ์ฃผ๋Š” ์ „์ฒ˜๋ฆฌ๊ธฐ ์—ญํ• ์„ ํ•œ๋‹ค.
  • ํ•˜์ง€๋งŒ ์–ผ๋งˆ ์ง€๋‚˜์ง€ ์•Š์•„ SASS๊ฐ€ CSS์˜ ๊ตฌ์กฐํ™” ๋ฅผ ํ•ด๊ฒฐํ•ด ์ฃผ๋Š” ์žฅ์ ๋ณด๋‹ค ๋‹ค๋ฅธ ๋ฌธ์ œ๋“ค์„ ๋” ๋งŽ์ด ๋งŒ๋“ค์–ด๋‚ธ๋‹ค๋Š” ๊ฒƒ์ด ๋ฐํ˜€์ง„๋‹ค. ์ „์ฒ˜๋ฆฌ ๋‚ด๋ถ€์—์„œ ์–ด๋–ค ์ž‘์—…์„ ํ•˜๋Š”์ง€ ์•Œ์ง€ ๋ชปํ•˜๊ณ , ์Šคํƒ€์ผ์ด ๊ฒน์น˜๋Š” ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•˜๊ธฐ ์œ„ํ•ด ๋‹จ์ˆœ ๊ณ„์ธต ๊ตฌ์กฐ๋ฅผ ๋งŒ๋“ค์–ด ๋‚ด๋Š” ๊ฒƒ์— ์˜์ง€ํ•˜๊ฒŒ ๋๊ณ , ๊ทธ ๊ฒฐ๊ณผ ์ปดํŒŒ์ผ๋œ CSS์˜ ์šฉ๋Ÿ‰์ด ์–ด๋งˆ๋ฌด์‹œํ•˜๊ฒŒ ์ปค์ง€๊ฒŒ ๋๋‹ค.

๐Ÿ’ก ์ „์ฒ˜๋ฆฌ๊ธฐ์˜ ์ง€ํ–ฅ์ 

  • ๋‹จ์ˆœ ๊ณ„์ธต ๊ตฌ์กฐ๋ฅผ ๋งŒ๋“ค์–ด ๋‚ด๋Š” ๊ฒƒ์— ์˜์ง€ํ•˜๋Š” ๊ฒƒ๊ณผ ์ปดํŒŒ์ผ๋œ CSS ํฐ ์šฉ๋Ÿ‰๊ณผ ๊ฐ™์€ CSS ์ „์ฒ˜๋ฆฌ๊ธฐ์˜ ๋ฌธ์ œ์ ์„ ๋ณด์™„ํ•˜๊ธฐ ์œ„ํ•ด์„œ BEM, OOCSS, SMACSS์™€ ๊ฐ™์€ CSS ๋ฐฉ๋ฒ•๋ก ์ด ๋Œ€๋‘๋๋‹ค. ๊ฐ๊ฐ์˜ ์ „์ฒ˜๋ฆฌ๊ธฐ๋“ค์€ ์žฅ๋‹จ์ ์„ ๊ฐ€์ง€๊ณ  ์žˆ์œผ๋‚˜ ๊ฒฐ๊ตญ ๋ชจ๋‘ ๊ฐ™์€ ์ฝ”๋“œ์˜ ์žฌ์‚ฌ์šฉ , ์ฝ”๋“œ์˜ ๊ฐ„๊ฒฐํ™” , ์ฝ”๋“œ์˜ ํ™•์žฅ์„ฑ ๊ณผ ๊ฐ™์€ ์ง€ํ–ฅ์ ์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.

โค๏ธโ€๐Ÿ”ฅ BEM

  • CSS ๋ฐฉ๋ฒ•๋ก ์œผ๋กœ Block, Element, Modifier๋กœ ๊ตฌ๋ถ„ํ•˜์—ฌ ํด๋ž˜์Šค๋ช…์„ ์ž‘์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค. ์œ„์˜ ์‚ฌ์ง„๊ณผ ๊ฐ™์ด ๊ฐ๊ฐ์˜ Block, Element, Modifier์€ -- ์™€ __ ๋กœ ๊ตฌ๋ถ„ํ•œ๋‹ค. ํด๋ž˜์Šค๋ช…์€ BEM ๋ฐฉ์‹์˜ ์ด๋ฆ„์„ ์—ฌ๋Ÿฌ ๋ฒˆ ๋ฐ˜๋ณตํ•ด ์žฌ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๋ฉฐ HTML/CSS/SASS ํŒŒ์ผ์—์„œ๋„ ๋” ์ผ๊ด€๋œ ์ฝ”๋”ฉ ๊ตฌ์กฐ๋ฅผ ๋งŒ๋“ค์–ด ์ค€๋‹ค. ํ•˜์ง€๋งŒ ํด๋ž˜์Šค๋ช… ์„ ํƒ์ž๊ฐ€ ์žฅํ™ฉํ•ด ์ง€๋ฉฐ ์ด๋Ÿฐ ๊ธด ํด๋ž˜์Šค๋ช… ์‚ฌ์šฉ ๋•Œ๋ฌธ์— ๋งˆํฌ์—…์ด ๋ถˆํ•„์š”ํ•˜๊ฒŒ ์ปค์ง„๋‹ค๋Š” ๋ฌธ์ œ์ ์ด ๋ฐœ์ƒํ•˜๊ธฐ ์‹œ์ž‘ํ•œ๋‹ค. ์žฌ์‚ฌ์šฉํ•  ๋•Œ๋งˆ๋‹ค ๋ชจ๋“  UI ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ช…์‹œ์ ์œผ๋กœ ํ™•์žฅํ•ด์•ผ๋งŒ ํ–ˆ๋‹ค. ๋˜ํ•œ SASS์™€ BEM๋„ ๊ณ ์น˜์ง€ ๋ชปํ•œ ๋ช‡ ๊ฐ€์ง€ ๋ฌธ์ œ๋“ค์€ ์–ธ์–ด ๋กœ์ง ์ƒ์— ์ง„์ •ํ•œ ์บก์Šํ™”์˜ ๊ฐœ๋…์ด ์—†๋‹ค๋Š” ๊ฒƒ์ด์—ˆ๊ณ , ์ด๋กœ ์ธํ•ด ๊ฐœ๋ฐœ์ž๋“ค์ด ์œ ์ผํ•œ ํด๋ž˜์Šค๋ช…์„ ์„ ํƒํ•˜๋Š” ๊ฒƒ์— ์˜์กดํ•  ์ˆ˜๋ฐ–์— ์—†์—ˆ๋‹ค.

โค๏ธโ€๐Ÿ”ฅ Styled-Component

  • ๊ธฐ๋Šฅ์  ํ˜น์€ ์ƒํƒœ๋ฅผ ๊ฐ€์ง„ ์ปดํฌ๋„ŒํŠธ๋“ค๋กœ๋ถ€ํ„ฐ UI๋ฅผ ์™„์ „ํžˆ ๋ถ„๋ฆฌํ•ด ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋‹จ์ˆœํ•œ ํŒจํ„ด์„ ์ œ๊ณต
  • ๊ธฐ์กด DOM์„ ๋งŒ๋“œ๋Š” ๋ฐฉ์‹์ธ CSS, SCSS ํŒŒ์ผ์„ ๋ฐ–์— ๋‘๊ณ , ํƒœ๊ทธ๋‚˜ id, class ์ด๋ฆ„์„ ๊ฐ€์ ธ์™€ ์“ฐ์ง€ ์•Š๊ณ , ๋™์ผํ•œ ์ปดํฌ๋„ŒํŠธ์—์„œ ์ปดํฌ๋„ŒํŠธ ์ด๋ฆ„์„ ์“ฐ๋“ฏ ์Šคํƒ€์ผ์„ ์ง€์ •ํ•˜๋Š” ๊ฒƒ์ด๋‹ค. CSS ํŒŒ์ผ์„ ๋ฐ–์— ๋‘์ง€ ์•Š๊ณ , ์ปดํฌ๋„ŒํŠธ์˜ ๋‚ด๋ถ€์— ๋„ฃ๊ธฐ ๋•Œ๋ฌธ์— CSS๊ฐ€ ์ „์—ญ์œผ๋กœ ์ค‘์ฒฉ๋˜์ง€ ์•Š๋Š”๋‹ค.
  • ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์œผ๋กœ ๊ฐœ๋ฐœ ๋ฐฉํ–ฅ์ด ์ง„ํ™”ํ•˜๊ฒŒ ๋˜๋ฉด์„œ ์ปดํฌ๋„ŒํŠธ ๋‹จ์œ„ ๊ฐœ๋ฐœ์€ ์บก์Šํ™”์˜ ์ค‘์š”์„ฑ์„ ๋ถˆ๋Ÿฌ์™”๋‹ค. ํ•˜์ง€๋งŒ CSS๋Š” ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜์˜ ๋ฐฉ์‹์„ ์œ„ํ•ด ๋งŒ๋“ค์–ด์ง„ ์ ์ด ํ•œ ๋ฒˆ๋„ ์—†์—ˆ๋‹ค. ๊ฒฐ๊ตญ CSS๋„ ์ปดํฌ๋„ŒํŠธ ์˜์—ญ์œผ๋กœ ๋ถˆ๋Ÿฌ๋“ค์ด๊ธฐ ์œ„ํ•ด CSS-in-JS๊ฐ€ ํƒ„์ƒํ•ด ์ด ๋ฌธ์ œ๋ฅผ ์ •ํ™•ํ•˜๊ฒŒ ํ•ด๊ฒฐํ•œ๋‹ค. CSS-in-JS์—” ๋Œ€ํ‘œ์ ์œผ๋กœ Styled-Component๊ฐ€ ์žˆ๋‹ค.

โž• CSS ๋ฐฉ๋ฒ•๋ก  ํŠน์ง•, ์žฅ๋‹จ์ 

0๊ฐœ์˜ ๋Œ“๊ธ€