[디자인패턴] MVC패턴, React에서 적용해보기

썸네일 이미지

오늘은 디자인패던이라 하면 가장 먼저 떠오르는 패턴 중 하나인 MVC패턴을 알아보려고 합니다.

 

MVC패턴?

MVC패턴은 관심사에 따라 계층을 분리하는것을 지향하는 것을 목적으로 둔 패턴입니다. 

이는 애플리케이션의 확장과 테스트, 유지에 필요한 노력과 시간을 줄여줍니다. 

 

MVC패턴의 흐름

 

MVC패턴의 흐름을 그림과 함께 간단하게 설명하면,
사용자가 Controller 통해 Model을 변화시키면 View를 업데이트 합니다.

 

그렇다면 Model, View, Controller는 어떤 역할을 하는지 알아보겠습니다.

• 모델(Model) 
  모델은 애플리케이션의 데이터와 비즈니스 로직을 담당합니다.
  데이터의 상태와 해당 데이터를 조작하는 메소드 또는 함수를 포함하고 
  주로 DB에서 가져온 정보를 가공하거나 애플리케이션 내부에서 상태를 유지하고 관리합니다. 
  
  
• 뷰(View) 
  뷰는 사용자에게 데이터를 시각적으로 표현하는 부분으로 인터페이스를 담당합니다.
  모델의 데이터를 가져와 보여주고 입력을 받아 컨트롤러에 전달합니다.
  
  
• 컨트롤러(Controller)
  컨트롤러는 사용자의 입력을 받아 모델을 업데이트 하거나 변화를 감지하여 뷰를 업데이트 합니다. 
  사용자 인터페이스와 모델간의 다리역할을 하며 비즈니스 로직을 처리하고 데이터의 흐름을 제어합니다.
  뷰와 모델의 직접적인 의존성을 끊어주는 중간 역할을 합니다.

 

React에서의 적용

React는 FLUX패턴을 사용해서 만들어진 컴포넌트 기반의 아키텍쳐를 사용합니다.
그럼에도 불구하고 MVC패턴을 적용해보도록 하겠습니다!

• 모델 : 컴포넌트 내부의 state를 모델로 볼수 있습니다. 

const users = [
  { id: 1, name: 'User1' },
  { id: 2, name: 'User2' },
  //...
];

export default users;

예시처럼 사용자 리스트를 다루는 경우엔 각 사용자의 정보는 users라는 모델에 저장됩니다.

 

• 뷰 : 컴포넌트 내부의 UI를 뷰로 볼 수 있습니다.

const UserList = ({ users }) => {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

export default UserList;

 

 

위에서 볼 수 있듯이 모델인 users의 내용을 가져와 map함수를 통해 UI로 나타냅니다.

 

• 컨트롤러 : 컴포넌트 내부의 이벤트 핸들러 또는 함수등이 컨트롤러의 역할을 하며 사용자의 입력, api통신등을 다루게 됩니다. 

import { useState } from 'react';
import UserList from './UserList';
import users from './UserModel';

const UserController = () => {
  const [userList, setUserList] = useState(users);

  const addUser = () => {
    const newUser = { id: userList.length + 1, name: `User${userList.length + 1}` };
    setUserList([...userList, newUser]);
  };

  return (
    <div>
      <h1>User Controller</h1>
      <button onClick={addUser}>Add User</button>
      <UserList users={userList} />
    </div>
  );
};

export default UserController;

 

예시를 잘 살펴보면 users라는 모델을 가져와 UserList에 주입하여 뷰단을 표현하고있는데 유저를 추가하는 버튼을 배치해 클릭하게 되면 새로운 유저를 생성 해주고 UserList의 데이터와 뷰를 업데이트 해줍니다.

 

어떻게보면 지금까지 우리가 React로 작업하면서 컴포넌트를 나눠 작업하던 과정 자체가 MVC패턴을 이용하는 과정과
비슷한 부분이었지 않을까 하는 생각이 조금은 드는데요..!

앞으로 다른 패턴들도 보면서 React에 어떻게 적용 할 수 있을지 알아보겠습니다. 

얼마 남지않은 설연휴 새해 복 많이 받으세요! 감사합니다