MVVM 디자인 패턴으로 react todo app 구현

MVVM 아키텍쳐 디자인 패턴

 

 

MVVM은 Model - View - View Model의 약자로 애플리케이션의 비즈니스 로직과 사용자에게 보여주는 presentation UI를 분리하는 패턴이다.

 

• View
  • 앱의 보여지는 UI
• View Model
  • 앱의 비즈니스 로직을 담고있음
  • 뷰와 모델 사이에서 뷰의 요청에 따라 로직을 실행
  • 모델 데이터의 변화에 따라 뷰를 갱신
  • 모델에 데이터를 요청, 데이터를 가공
• Model
  • 데이터를 처리
  • 뷰모델에게 데이터를 응답

뷰 

ui 컴포넌트이다. 상위 컴포넌트에서 props로 전달받은 상태에 따라서 화면이 동작한다.

사용자가 이벤트를 발생시키면 이벤트에 따른 데이터 변경을 뷰에서 바로 처리하지않고, 상위 컨테이너인 View Model 컨테이너에서 처리하도록 한다.

 

interface Props {
  data: Todo;
  deleteTodoItem: (id: string) => void;
  updateCheckBox: (id: string, isChecked: boolean) => void;
}
export const TodoBox = ({
  data,
  deleteTodoItem,
  updateCheckBox,
}: Props) => {
  const [checked, setChecked] = useState(data.isDone);
  const [isOnHover, setIsOnHover] = useState(false);

  const handleChangeCheckBox = (e: React.ChangeEvent<HTMLInputElement>) => {
    setChecked(e.target.checked);
    updateCheckBox(data.id, e.target.checked);
  };

  const handleDelete = () => {
    deleteTodoItem(data.id);
  };

  const showDeleteIconBox = () => {
    if (isOnHover)
      return (
        <Box>
          <IconButton onClick={handleDelete}>
            <DeleteIcon />
          </IconButton>
        </Box>
      );
  };

  return (
    <Paper
      elevation={3}
      sx={{ m: 2 }}
      onMouseEnter={() => setIsOnHover(true)}
      onMouseLeave={() => setIsOnHover(false)}>
      <Box
        sx={{
          display: 'flex',
          justifyContent: 'space-between',
        }}>
        <Box sx={{ display: 'flex', alignItems: 'center' }}>
          <Checkbox
            checked={data.isDone}
            onChange={handleChangeCheckBox}
            inputProps={{ 'aria-label': 'controlled' }}
          />
           {data.content}
        </Box>
        {showDeleteIconBox()}
      </Box>
   
    </Paper>
  );
};

 

뷰모델 

View Model은 데이터가 존재하고 있는 Model의 데이터를 업데이트하는 역할을 한다. 

또한 실제로 데이터 상태를 처리하는 로직을 담고있어서 실제 메소드를 호출하고 View한테 그 메서드를 props로 내려준다. 

 

export const TodoContainer = () => {
  const dispatch = useDispatch();
  const todolist = useSelector((state: RootState) => state.todo);
  // console.log(todolist, 'todolist 셀렉터');

  const updateCheckBox = (id: string, isChecked: boolean) => {
    dispatch(updateTodoCheck({ id: id, isDone: isChecked }));
  };

  const deleteTodoItem = (id: string) => {
    dispatch(deleteTodo({ id: id }));
  };

  return (
    <>
      {todolist.map((el: Todo) =>
          <TodoBox
            key={el.id}
            data={el}
            updateCheckBox={updateCheckBox}
            deleteTodoItem={deleteTodoItem}
            designateEditItem={designateEditItem}></TodoBox>
      )}
    </>
  );
};

 

모델

실제 데이터를 담고 데이터를 처리하는 부분이다. 상태 관리를 위해 redux toolkit을 활용해서 작성했다.

View Model에서 데이터 변경을 rtk dispatch 함수를 통해 Model한테 업데이트하고, 모델 즉, 슬라이스의 전역 상태가 변화한다.

 

View Model은 슬라이스의 변경된 데이터를 감지하게 되고 재렌더링이 된다. View 또한 View Model을 바라보고 있기에 View Model에서 변경된 상태값을 받은 View도 변경을 감지하게 되고 새로운 데이터를 띄우기 위해 재렌더링 된다. 

 

export interface Todo {
  id: string;
  content: string;
  createdAt: string;
  isDone: boolean;
  completedAt: string | null;
}

export const todoSlice = createSlice({
  name: 'todo',
  initialState: [
    {
      id: 'bzte_tfG3k2mh3o-Vf-zX',
      content: '가나',
      createdAt: '6/19/2023, 8:20:02 PM',
      isDone: false,
      completedAt: null,
    },
    {
      id: 'rAFHp_GrutBJzt_5r1Gej',
      content: '다라',
      createdAt: '6/19/2023, 8:20:02 PM',
      isDone: false,
      completedAt: null,
    },
  ] as Todo[],
  reducers: {
    updateTodoCheck: (
      state,
      action: PayloadAction<{ id: string; isDone: boolean }>,
    ) => {
      // 상태를 immutable하게 바꾸기
      const findItem = state.find((it) => it.id === action.payload.id);
      return state.map((el) => {
        if (el === findItem) {
          if (action.payload.isDone) {
            return {
              ...findItem,
              isDone: action.payload.isDone,
              // content: action.payload.content,
              completedAt: koreanTimeFormat(),
            };
          } else if (!action.payload.isDone) {
            return {
              ...findItem,
              isDone: action.payload.isDone,
              completedAt: null,
            };
          }
        }
        return el;
      });
    },

    deleteTodo: (state, action: PayloadAction<{ id: string }>) => {
      return state.filter((el: Todo) => el.id !== action.payload.id);
    },
  },
});

 

 

 

내 투두 앱의 경우 각 파일은 MVVM 중에서 본인에게 해당하는 역할을 하고있다. 파일명을 덧붙여보자면 이런 식이다.

 

Reference

https://namu.wiki/w/MVVM

https://beomy.tistory.com/43

https://velog.io/@ellyheetov/MVVM%EC%9D%B4%EB%9E%80  

https://hini7.tistory.com/145