[TIL] React MVVM pattern

* MVVM 패턴이란?

1990년대 마틴 파울러에 의해 나온 MVP패턴에서 파생된 패턴입니다.

Model-View-ViewModel 로 구성되어 있습니다.

자세히 알아보기전 간단히 Model, View, ViewModel에 대해 설명해보자면 다음과 같습니다.

* VIEW

View는 사용자가 상호 작용하는 UI 계층으로, 쉽게 말하자면 유저가 보는 화면을 의미합니다.
주로 비지니스 로직을 처리하지 않고, UI에 연관된 로직만 수행합니다.
몇몇 사람들은 UI에 연관된 로직수행과 Input에 대한 부분을 수행하는 것을
View Controller라고 부르기도 합니다.

const ViewComponent = ({books, handleToggleFavorite, handleClickNeverView}) => {
  return (
    <div>
      <BooksList 
        books={books} 
        handleToggleFavorite={handleToggleFavorite} 
        handleClickNeverView={handleClickNeverView} 
       />
    </div>
  )  
}

props를 받아서 주로 화면을 렌더링하는 것들이죠

* Model

모델이 데이터 소스 역할을합니다.
응용 프로그램의 글로벌 저장소. 네트워크 계층, 데이터베이스,
서비스의 모든 데이터를 작성하여 쉽게 제공합니다.
실제로 모델을 업데이트하고 부작용이 없는 로직을 제외한 다른 로직은 없어야합니다.

class Model {
    constructor() {
      books = [
        {id: 'RCB-123',name: "React Cook Book", isFavorite: false},
        {id: 'VCB-123',name: "Vue Cook Book", isFavorite: false},
        {id: 'ACB-123',name: "Angular Cook Book", isFavorite: false}
      ];
    }
    
    getBooks() {
        return this.books
    }

    toggleFavorite(bookId) {
      const target = this.books.filter(item => item.id === bookId)[0];
      target.isFavorite = !target.isFavorite
    }
}

출처 : https://medium.cobeisfresh.com/level-up-your-react-architecture-with-mvvm-a471979e3f21