231016 개발일지 TIL - Javascript에서 MVC패턴(React에서의 MVC 패턴?)

The Web On Everything·2023년 10월 15일
0

개발일지

목록 보기
159/269

Javascript에서 MVC패턴

MVC(Model-View-Controller) 패턴은 애플리케이션의 로직을 세 가지 구성 요소로 분리하는 방법이다.

1. Model

Model은 데이터와 그 데이터를 처리하는 논리를 나타낸다. 사용자 정보, 제품 정보 등을 저장하고 관리하는 부분이 해당된다.

2. View

View는 사용자에게 보여지는 부분으로, 사용자 인터페이스(UI)를 관리한다. 웹 페이지에 표시되는 HTML,CSS 코드나 화면에 표시되는 다른 UI 요소들이 여기에 포함된다.

3. Controller

Controller는 Model과 View 사이의 연결고리 역할을 합니다. Controller는 사용자의 입력(ex: 버튼 클릭)을 받아서 Model의 상태를 변경하거나 View가 적절한 응답을 보여주도록 한다.

결론
JavaScript에서 MVC 패턴은 프론트엔드 개발에서 주로 사용한다. AngularJS, Backbone.js, Ember.js 등과 같은 여러 JavaScript 프레임워크들이 MVC 패턴을 따르고 있다.

MVC 패턴의 목적은 애플리케이션 개발에서 관심사의 분리(Separation of Concerns)를 도모함으로써 코드 재사용성을 높이고 유지보수성을 개선하는 것이다.

JavaScript와 함께 MVC패턴으로 구조화된 코드 작성은 코드 관리 및 확장성 측면에서 장점이 있다.

React에서도 MVC 패턴을 사용하나요?

React는 자체적으로 MVC 패턴을 명시적으로 따르는 프레임워크가 아니다. React는 주로 사용자 인터페이스를 구축하는 데 초점을 맞춘 라이브러리로, MVC 패턴의 'V'(View) 부분에 가장 근접하다.

그러나 React와 Redux 등의 상태 관리 라이브러리를 함께 사용하면 MVC 패턴과 유사한 구조를 만들 수 있다. 이 경우, React 컴포넌트가 View 역할을 하고, Redux Store가 Model 역할을 하며, Action creators와 Reducers가 Controller 역할을 합니다.

따라서 React 자체만으로는 MVC 패턴이 적용되지 않지만, 다른 도구들과 함께 사용하여 MVC 패턴에 가깝게 애플리케이션을 설계하고 개발하는 것이 가능하다.

profile
오늘은 무슨 오류를 만날까?! 널 만나러 가는 길~ LOL

0개의 댓글