๐ŸŽจ React Design Pattern : Presentational and Container & Atomic Design

hyeojungยท2021๋…„ 12์›” 27์ผ
3

React

๋ชฉ๋ก ๋ณด๊ธฐ
1/4
post-thumbnail

๐Ÿงฉ Presentational and Container Pattern

โ“ Presentational and Container ํŒจํ„ด์ด๋ž€?

โžก๏ธ Presentational ์ปดํฌ๋„ŒํŠธ์™€ Container ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋”ฐ๋กœ ์‚ฌ์šฉํ•จ์œผ๋กœ์จ ๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ์™€ ๋ฐ์ดํ„ฐ ์ถœ๋ ฅ์„ ๋ถ„๋ฆฌํ•˜๋Š” ํŒจํ„ด

๐Ÿ“š Container Component

  • ์ฃผ๋กœ ๋ฐ์ดํ„ฐ fetch๊ฐ€ ์ด๋ฃจ์–ด์ง„๋‹ค. Redux๋ฅผ ์‚ฌ์šฉํ•ด ์ƒํƒœ ๊ด€๋ฆฌ๋ฅผ ํ•  ๊ฒฝ์šฐ dispatch
  • behavior ๋กœ์ง์„ ๊ด€๋ฆฌํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ๋กœ, DOM Markup์ด๋‚˜ CSS๊ฐ€ ์—†๋‹ค.
  • ๋ Œ๋”๋ง๋˜์–ด์•ผ ํ•  ๋ฐ์ดํ„ฐ ๋˜๋Š” callback ํ•จ์ˆ˜๋ฅผ Presentation์ด๋‚˜ ๋˜๋‹ค๋ฅธ Container ์ปดํฌ๋„ŒํŠธ์— props๋กœ ์ „๋‹ฌํ•œ๋‹ค.
  • ์—ฐ๊ด€ ์žˆ๋Š” ์„œ๋ธŒ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ Œ๋”๋งํ•œ๋‹ค.

๐Ÿ“š Presentational Component

  • ๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ ๋Šฅ๋ ฅ์ด ์—†๊ณ , CC(Container Component)๋กœ๋ถ€ํ„ฐ props๋ฅผ ๋ฐ›๋Š”๋‹ค.
  • View, ์ฆ‰ DOM Markup๊ณผ Style(CSS)๋ฅผ ๋‹ด๋‹นํ•œ๋‹ค.
  • ๊ธฐ๋ณธ์ ์œผ๋กœ๋Š” state๋ฅผ ์ง์ ‘ ์กฐ์ž‘ํ•˜์ง€ ์•Š๊ณ  CC๊ฐ€ ๋‚ด๋ ค์ค€ props์˜ ํ•จ์ˆ˜๋กœ state๋ฅผ ๋ณ€๊ฒฝํ•œ๋‹ค.
  • View์— ํ•„์š”ํ•œ state๋Š” ๊ฐ€์งˆ ์ˆ˜ ์žˆ๋‹ค.

๐Ÿ˜€ ์žฅ์ 

  • ์•ฑ์˜ ๊ธฐ๋Šฅ๊ณผ ui์˜ ๊ตฌ๋ถ„์ด ์‰ฝ๋‹ค.
  • ๋กœ์ง ์ˆ˜ํ–‰๊ณผ Markup์ด ๋ถ„๋ฆฌ๋˜์–ด ์žˆ์–ด ์œ ์ง€๋ณด์ˆ˜๊ฐ€ ์‰ฝ๊ณ  ์žฌ์‚ฌ์šฉ์„ฑ์ด ๋›ฐ์–ด๋‚˜๋‹ค.
  • Markup ๋ณ€๊ฒฝ์— ์œ ์—ฐํ•˜๊ฒŒ ๋Œ€์ฒ˜ํ•  ์ˆ˜ ์žˆ๋‹ค.

๐Ÿ˜… ๋‹จ์ 

  • ์ปจํ…Œ์ด๋„ˆ์˜ ๋ฒ”์œ„๋ฅผ ํฌ๊ฒŒ ์žก๋Š” ๊ฒฝ์šฐ FC์— ์ „๋‹ฌํ•  props๊ฐ€ ๋งŽ์•„์ง€๊ณ , ์ฝ”๋“œ๊ฐ€ ๊ธธ์–ด์งˆ ์ˆ˜ ์žˆ๋‹ค.
  • ์ปจํ…Œ์ด๋„ˆ์˜ ๋ฒ”์œ„๋ฅผ ์ž‘๊ฒŒ ์žก๋Š” ๊ฒฝ์šฐ ์ˆ™๋ จ๋„๊ฐ€ ๋‚ฎ๋‹ค๋ฉด ๋ถ„๋ฆฌํ•˜๋Š” ๋ฐ ์‹œ๊ฐ„์ด ๋งŽ์ด ๋“ค ์ˆ˜ ์žˆ๋‹ค.


๐Ÿงฉ Atomic Design Pattern

โ“ Atomic Design ํŒจํ„ด์ด๋ž€?

โžก๏ธ ๊ฐ€์žฅ ์ž‘์€ ์ปดํฌ๋„ŒํŠธ ๋‹จ์œ„๋ฅผ ์›์ž(Atoms) ๋กœ ์„ค์ •ํ•˜๊ณ , ์ด๋ฅผ ๋ฐ”ํƒ•์œผ๋กœ ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค์–ด ์ฝ”๋“œ ์žฌ์‚ฌ์šฉ์„ ์ตœ๋Œ€ํ™”ํ•˜๋Š” ํŒจํ„ด
โžก๏ธ ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ๋Š” ์ˆœ์„œ๋Œ€๋กœ ๋ถ„์ž(Molecules), ์œ ๊ธฐ์ฒด(Organisms), ํ…œํ”Œ๋ฆฟ(Templates), ํŽ˜์ด์ง€(Pages) ๊ฐ€ ๋œ๋‹ค.

๐Ÿ“š ์›์ž (Atoms)

  • button, title, input๊ณผ ๊ฐ™์€ basic html elements๋ฅผ ํฌํ•จํ•˜๋Š” ๊ฐ€์žฅ ์ž‘์€ ๊ตฌ์„ฑ ์ปดํฌ๋„ŒํŠธ
  • ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ์—์„œ ์žฌ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋ฏ€๋กœ ๋‹ค๋ฅธ ๊ณณ์— ์˜ํ–ฅ์„ ๋ฏธ์น˜์ง€ ์•Š๋Š” ์ตœ์†Œํ•œ์˜ ๊ธฐ๋Šฅ๋งŒ์„ ํฌํ•จํ•˜๋„๋ก ์ œ์ž‘ํ•ด์•ผ ํ•œ๋‹ค.
  • ๋ ˆ์ด๋ธ”(Label), ํ…์ŠคํŠธ(Text), ๋ฒ„ํŠผ(Button) ๋“ฑ

๐Ÿ“š ๋ถ„์ž (Molecules)

  • 2๊ฐœ ์ด์ƒ์˜ ์›์ž๋กœ ๊ตฌ์„ฑ๋˜์–ด ์žˆ๋Š”, ํ•˜๋‚˜์˜ ๋‹จ์œ„๋กœ ํ•จ๊ป˜ ๋™์ž‘ํ•˜๋Š” ๊ทธ๋ฃน
  • ์ž…๋ ฅ ํผ(Input forms), ๋„ค๋น„๊ฒŒ์ด์…˜(Navigation), ์นด๋“œ(Card) ๋“ฑ

๐Ÿ“š ์œ ๊ธฐ์ฒด (Organisms)

  • ๋ถ„์ž, ์›์ž, ๋˜๋Š” ๋‹ค๋ฅธ ์œ ๊ธฐ์ฒด๋กœ ๊ตฌ์„ฑ๋œ ๋น„๊ต์  ๋ณต์žกํ•œ ๊ทธ๋ฃน
  • ์ธํ„ฐํŽ˜์ด์Šค์˜ ๊ฐœ๋ณ„์ ์ธ ์˜์—ญ์„ ํ˜•์„ฑํ•œ๋‹ค.
  • ์ด ๋‹จ์œ„์—์„œ ์ƒํƒœ ๊ด€๋ฆฌ๋ฅผ ์ˆ˜ํ–‰ํ•˜๊ธฐ๋„ ํ•œ๋‹ค. (์ง„๋ฆฌ์˜ ์ผ€๋ฐ”์ผ€ ,,,)

๐Ÿ“š ํ…œํ”Œ๋ฆฟ (Templates)

  • ๋ถ„์ž, ์›์ž, ์œ ๊ธฐ์ฒด ์ปดํฌ๋„ŒํŠธ๋“ค์„ ๋ฐฐ์น˜ํ•˜๊ณ  ์„ค๊ณ„ ๊ตฌ์กฐ๋ฅผ ๋ณด์—ฌ์ฃผ๋Š” ๊ทธ๋ฃน. ์ฆ‰ ์Šคํƒ€์ผ๋ง์— ์ง‘์ค‘ํ•œ ๋‹จ์œ„
  • ์‹ค์ œ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์—†์„ ๊ฒฝ์šฐ ํŽ˜์ด์ง€๊ฐ€ ์–ด๋–ป๊ฒŒ ๋ณด์ด๋Š”์ง€์— ๋Œ€ํ•œ ๊ณจ๊ฒฉ ๊ตฌ์กฐ (์™€์ด์–ดํ”„๋ ˆ์ž„ ๊ฐ™์€ ๋Š๋‚Œ !!)

๐Ÿ“š ํŽ˜์ด์ง€ (Pages)

  • ์‹ค์ œ ์ปจํ…์ธ ๋“ค์„ ๋ฐฐ์น˜ํ•œ UI๋ฅผ ๋ณด์—ฌ์ฃผ๋Š”, ํ…œํ”Œ๋ฆฟ์ด ๊ตฌ์ฒดํ™”๋œ ๊ทธ๋ฃน
  • ๋ถ„์ž, ์›์ž, ์œ ๊ธฐ์ฒด๋ฅผ ํฌํ•จํ•œ๋‹ค.
  • ๋ณดํ†ต ์ด ๋‹จ์œ„์—์„œ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ƒํƒœ ๊ด€๋ฆฌ (Redux ๋“ฑ)๊ฐ€ ์ด๋ฃจ์–ด์ง„๋‹ค. but ๋ถ„์ž, ์œ ๊ธฐ์ฒด, ํ…œํ”Œ๋ฆฟ ๋‹จ์œ„์—์„œ ์ปดํฌ๋„ŒํŠธ ๋™์ž‘์„ ์œ„ํ•œ ์ƒํƒœ๊ด€๋ฆฌ๋Š” ๊ฐ€๋Šฅ ><


๐Ÿ˜€ ์žฅ์ 

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

๐Ÿ˜… ๋‹จ์ 

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


์ฐธ๊ณ ์ž๋ฃŒ

๋””์ž์ธํŒจํ„ด์˜ ์ •์˜ (feat MVC, ์˜ต์ €๋ฒ„ํŒจํ„ด)
presentational & container ๋””์ž์ธ ํŒจํ„ด
Container ์ปดํฌ๋„ŒํŠธ์™€ Presentational ์ปดํฌ๋„ŒํŠธ
App ์ปดํฌ๋„ŒํŠธ ์ •๋ฆฌํ•˜๊ธฐ
์ปดํฌ๋„ŒํŠธ ๋ถ„๋ฆฌ์˜ ๋ฏธํ•™
์•„ํ† ๋ฏน(Atomic) ์ปดํฌ๋„ŒํŠธ ๋””์ž์ธ ๊ฐœ๋ฐœ ํŒจํ„ด
๋ฆฌ์•กํŠธ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ตฌ์กฐ - ์•„ํ† ๋ฏน ๋””์ž์ธ
React Design Pattern ๐ŸŽจ


+) Atomic ๋””์ž์ธ ํŒจํ„ด ๊ด€๋ จ ๊ธ€๋“ค ์ฝ์œผ๋ฉด์„œ, ๋ฉ‹์žˆ์ง€๋งŒ ์ €๊ฑฐ ์–ธ์ œ ์ ์šฉํ•˜์ง€ ์‹ถ์—ˆ๋Š”๋ฐ ๋ง‰์ƒ ๊นƒํ—™ ์ฐพ์•„๋ณด๋‹ˆ ์ด ํŒจํ„ด ์ ์šฉํ•˜์‹  ๋ถ„๋“ค์ด ๊ฝค ๋งŽ๋”๋ผ ๊ทธ๋ž˜์„œ ๋‚˜๋„ ์ ์šฉํ•ด๋ณด๋ ค ํ•จ ๊ทผ๋ฐ ์–ธ์ œ ํ•˜์ง€ ,,,?
+) ์ด๋‹ค์Œ ๊ธ€์€ ๋‚ด ํ”„๋กœ์ ํŠธ์— Atomic ๋””์ž์ธ ์ ์šฉํ•˜๋Š” ๊ฑธ๋กœ ํ•ด์•ผ๊ฒ ๋‹ค ๊ทผ๋ฐ ๋ถ€์‹คํ•จ์„ ๊ณ๋“ค์ธ

profile
์‘์•  ๋‚˜ ์• ๊ธฐ ๊ฐœ๋ฐœ์ž

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

comment-user-thumbnail
2021๋…„ 12์›” 27์ผ

๐Ÿ‘

1๊ฐœ์˜ ๋‹ต๊ธ€
comment-user-thumbnail
2021๋…„ 12์›” 27์ผ

react์˜ ๋””์ž์ธ ํŒจํ„ด๋“ค์— ๋Œ€ํ•ด ์•Œ๊ฒŒ๋˜์—ˆ๋„ค์š”. ์ข‹์€ ๊ธ€ ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค!

1๊ฐœ์˜ ๋‹ต๊ธ€