MVC, MVP, MVVM ๊ฐ„๋‹จ ์ •๋ฆฌ

2021. 9. 7. 01:05

MVC, MVP, MVVM์€ ๋””์ž์ธ ํŒจํ„ด์œผ๋กœ ์—ญํ• ์„ ์–ด๋–ป๊ฒŒ ๋‚˜๋ˆ„๋ƒ์˜ ์ฐจ์ด์ด๋‹ค.

๊ฐ ๊ณ„์ธต์„ ๋ถ„๋ฆฌ์‹œํ‚ด์œผ๋กœ์จ ์ฝ”๋“œ์˜ ์žฌํ™œ์šฉ์„ฑ์„ ๋†’์ด๊ณ  ๋ถˆํ•„์š”ํ•œ ์ค‘๋ณต์„ ๋ง‰๋Š”๋‹ค.

 

1. MVC

MVC๋Š” Model + View + Controller๋ฅผ ์˜๋ฏธํ•œ๋‹ค.

  • Model : ์‚ฌ์šฉ๋˜๋Š” ๋ฐ์ดํ„ฐ
  • View : ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์—ฌ์ง€๋Š” UI
  • Controller : ๋ชจ๋“  ์ž…๋ ฅ์„ ์ฒ˜๋ฆฌ

 

๋™์ž‘

  1. ์ž…๋ ฅ์ด Controller๋กœ ๋“ค์–ด์˜จ๋‹ค.
  2. Controller๋Š” ์ž…๋ ฅ์— ํ•ด๋‹นํ•˜๋Š” Model์„ ์—…๋ฐ์ดํŠธ ํ•œ๋‹ค.
  3. Controller๋Š” Model์„ ๋ณด์—ฌ์ค„ View๋ฅผ ์„ ํƒํ•œ๋‹ค.
  4. ๐Ÿ’ฅ ์ด๋•Œ Controller๋Š” ์—ฌ๋Ÿฌ ๊ฐœ์˜ View๋ฅผ ์„ ํƒํ•  ์ˆ˜๋„ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— 1:n ๊ด€๊ณ„์ด๋‹ค.
  5. ๐Ÿ’ฅ Controller๋Š” ์„ ํƒ๋งŒ ํ•˜๊ณ  ์—…๋ฐ์ดํŠธ ์‹œ์ผœ์ฃผ์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— View๋Š” Controller๋ฅผ ์•Œ์ง€ ๋ชปํ•œ๋‹ค.
  6. View๋Š” Model์„ ์ด์šฉํ•˜์—ฌ ์—…๋ฐ์ดํŠธ ํ•œ๋‹ค.

 

ํŠน์ง•

  • ์žฅ์  : ๋‹จ์ˆœํ•˜๋‹ค.
  • ๋‹จ์  : View์™€ Model ์‚ฌ์ด์˜ ์˜์กด์„ฑ์ด ๋†’๋‹ค.

 

 

2. MVP

MVP๋Š” Model + View + Presenter๋ฅผ ์˜๋ฏธํ•œ๋‹ค.

MVC ํŒจํ„ด์—์„œ์˜ Controller ๋Œ€์‹  Presenter๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.

  • Model : ์‚ฌ์šฉ๋˜๋Š” ๋ฐ์ดํ„ฐ
  • View : ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์—ฌ์ง€๋Š” UI. ์ž…๋ ฅ ์ฒ˜๋ฆฌ
  • Presenter : View์™€ Model์˜ ๋‹ค๋ฆฌ ์—ญํ• . View์™€ Model์˜ ์ธ์Šคํ„ด์Šค๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์Œ

 

๋™์ž‘

  1. ์ž…๋ ฅ์ด View๋กœ ๋“ค์–ด์˜จ๋‹ค.
  2. View๋Š” Presenter์—๊ฒŒ ๋ฐ์ดํ„ฐ๋ฅผ ์š”์ฒญํ•œ๋‹ค.
  3. ๐Ÿ’ฅ ํ•˜๋‚˜์˜ View๋Š” ํ•˜๋‚˜์˜ Presenter์—๊ฒŒ ์š”์ฒญํ•˜๋ฏ€๋กœ 1:1 ๊ด€๊ณ„์ด๋‹ค.
  4. Presenter๋Š” Model์—๊ฒŒ ๋ฐ์ดํ„ฐ๋ฅผ ์š”์ฒญํ•œ๋‹ค.
  5. Model์€ Presenter์—๊ฒŒ ๋ฐ์ดํ„ฐ๋ฅผ ์‘๋‹ตํ•œ๋‹ค.
  6. Presenter๋Š” View์—๊ฒŒ ๋ฐ์ดํ„ฐ๋ฅผ ์‘๋‹ตํ•œ๋‹ค.
  7. View๋Š” ์‘๋‹ต๋ฐ›์€ ๋ฐ์ดํ„ฐ๋ฅผ ์ด์šฉํ•˜์—ฌ ํ™”๋ฉด์— ๋‚˜ํƒ€๋‚ธ๋‹ค.
  8. ๐Ÿ’ฅ View์™€ Model์€ ์™„๋ฒฝํžˆ ๋ถ„๋ฆฌ๋˜์—ˆ๊ธฐ ๋•Œ๋ฌธ์— View๋Š” Model์„ ์•Œ์ง€ ์•Š์•„๋„ ๋œ๋‹ค.

 

ํŠน์ง•

  • ์žฅ์  : View์™€ Model ์‚ฌ์ด์˜ ์˜์กด์„ฑ์ด ์—†๋‹ค.
  • ๋‹จ์  : View์™€ Presenter ์‚ฌ์ด์˜ ์˜์กด์„ฑ์ด ๋†’๋‹ค.

 

 

3. MVVM

MVVM์€ Model + View + ViewModel์„ ์˜๋ฏธํ•œ๋‹ค.

  • Model : ์‚ฌ์šฉ๋˜๋Š” ๋ฐ์ดํ„ฐ
  • View : ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์—ฌ์ง€๋Š” UI. ์ž…๋ ฅ ์ฒ˜๋ฆฌ
  • ViewModel : View๋ฅผ ํ‘œํ˜„ํ•˜๊ธฐ ์œ„ํ•œ Model. View๋ฅผ ๋‚˜ํƒ€๋‚ด๊ธฐ ์œ„ํ•œ ๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ

 

๋™์ž‘

  1. ์ž…๋ ฅ์ด View๋กœ ๋“ค์–ด์˜จ๋‹ค.
  2. View๋Š” Command ํŒจํ„ด์œผ๋กœ ViewModel์— ์ž…๋ ฅ์„ ์ „๋‹ฌํ•œ๋‹ค.
  3. ๐Ÿ’ฅ ViewModel์€ ์—ฌ๋Ÿฌ View์˜ ์ž…๋ ฅ์„ ๋ฐ›์œผ๋ฏ€๋กœ 1:n ๊ด€๊ณ„์ด๋‹ค.
  4. ViewModel์€ Model์—๊ฒŒ ๋ฐ์ดํ„ฐ๋ฅผ ์š”์ฒญํ•œ๋‹ค.
  5. Model์€ ViewModel์—๊ฒŒ ๋ฐ์ดํ„ฐ๋ฅผ ์‘๋‹ตํ•œ๋‹ค.
  6. ViewModel์€ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€๊ณตํ•˜์—ฌ ์ €์žฅํ•œ๋‹ค.
  7. View๋Š” ViewModel๊ณผ Data Bindingํ•˜์—ฌ ํ™”๋ฉด์— ๋‚˜ํƒ€๋‚ธ๋‹ค.
  8. ๐Ÿ’ฅ Command์™€ Data Binding์„ ์‚ฌ์šฉํ•˜์—ฌ View์™€ ViewModel ์‚ฌ์ด์˜ ์˜์กด์„ฑ์„ ์—†์•ค๋‹ค.

 

ํŠน์ง•

  • ์žฅ์  : View์™€ Model ์‚ฌ์ด์˜ ์˜์กด์„ฑ์ด ์—†๋‹ค. View์™€ ViewModel ์‚ฌ์ด์˜ ์˜์กด์„ฑ์ด ์—†๋‹ค.
  • ๋‹จ์  : ViewModel ์„ค๊ณ„๊ฐ€ ์–ด๋ ต๋‹ค.

 

 

์ฐธ๊ณ  : https://beomy.tistory.com/43 , https://hackersstudy.tistory.com/71

728x90

BELATED ARTICLES

more