Memento Pattern Use TypeScript In React

리액트에서 타입스크립트를 사용해 옵저버 패턴을 구현한 프로젝트 입니다.

예시는 Todo List를 사용하였습니다.

Preview

Ideation

롤백하는 코드를 보면 메멘토 패턴으로 구현되어 있습니다.

models/Memento.ts

인터페이스 IOriginator와 클래스 CareTaker로 이루어져 있습니다.

IOriginator는 오리지널 값을 들고 있을 수 있는 객체에 Implement됩니다.

CareTaker는 롤백을 주도하는 클래스입니다.

models/TodoListCollection.ts

TodoListCollection.ts는 실제 렌더링에 관려하지 않으며, 상태만을 가지도록 IOriginator를 implement하는 클래스입니다.

그래서, 행위가 변경되거나 달라질 때마다 해당 클래스의 상태를 변경하도록 set을 진행합니다.

hooks/useTodo.tsx

rollback 함수에서 보면, TodoList를 추가할 때마다 memento를 생성하여 CareTaker에 추가합니다.

CareTaker는 rollback시 배열을 하나씩 줄이며, 힙에 다음 타자를 restoring 합니다.

Installation & Launch

$ npm install

# use Yarn
$ yarn

$ npm run start

# use Yarn
$ yarn start

Folder Structure

폴더 구조는 심플하게 components, hooks, models, utils로 이루어져 있습니다.

components

레이아웃 컴포넌트가 담긴 폴더입니다.

Todo.tsx

Todo 하나에 대해서 렌더링 해주는 Component입니다

Todos.tsx

Todo를 리스트형태로 들고 있으면서 출력해주는 Component입니다.

hooks

모델과 레이아웃 컴포넌트를 Binding 해주는 MVC 기준으로 Controller에 해당하는 영역입니다.

useTodo.tsx

React Hooks를 사용하여 만든 커스텀 훅입니다.

내부에서 TodoListCollection을 상태로 갖고있어, 해당 리스트에 Class 객체가 생성되어 들어갑니다.

models

프로젝트에 쓰이는 interface와 class를 갖고 있는 폴더입니다.

Memento.ts

메멘토 패턴에 사용되는 인터페이스, 클래스들 입니다.

Removable.ts

삭제할 때 사용되는 인터페이스, 클래스들 입니다.

Todo.ts

Todo 클래스입니다.

Todo를 추상화 한 클래스입니다.

TodoList.ts

TodoList 클래스입니다.

TodoList를 추상화 한 클래스입니다.

utils

심심해서 만든 숫자를 한글로 바꿔주는 함수를 담고 있습니다.

Vallista / React-Memento-Pattern-Use-TypeScript