맛동산이

리액트 스터디 1탄) mvc 아키텍쳐 본문

웹/리액트

리액트 스터디 1탄) mvc 아키텍쳐

진ddang 2022. 7. 12. 15:47

리액트를 다루는 기술을 참고하여 기술하였습니다.


자바스크립트

자바스크립트 라는 언어는 웹 브라우저에서 간단한 연산을 하거나 시각적인 효과를 주는 단순한 스크립트 언어였지만, 서버 사이드는 물론이며 모바일, 데스크톱 어플리케이션에서 엄청나게 활약하고 있는 언어다.

이러한 자바스크립트만으로 큰 어플리케이션을 만들수 있지만, 이를 구조화 하기 위해서 자바스크립트 기반의 다양한 언어들은

MVC 아키텍쳐, MVVM, MVW와 같은 아키텍쳐를 사용하는 것으로 어플리케이션을 구조화 하였다.

MVC란?

모델(model)-뷰(view)-컨트롤러(controller)

: 개발시 3가지 형태로 나누어서 개발하는 방법론이다.

  1. model : 모델은 어플리케이션이 “무엇”을 할지를 정의한다. 모델에 상태가 변화가 있을때, 컨트롤러와 뷰에 통보한다.

    간단하게 설명해서 데이터를 처리하는 부분

  1. Controller : 모델이 “어떻게” 처리할지를 알려주는 역할이며, 모델에 명령을 보내는 것으로 모델의 상태를 변경할수 있다.

    간단하게, 사용자의 입력을 받고 model과 view의 통신부분

  1. View : 결과물을 생성하고, 화면에 보여준다.

    간단하게, UI부분

동작방식

  1. view를 통해 사용자에게 입력을 받는다.
  1. 컨트롤러가 입력을 확인하고 model에 전달, 업데이트
  1. Controller가 Model에서 view를 선택
  1. view가 변경됨.

단점

“뷰와 모델의 의존성”

mvc에서는 view를 controller에 연결한 단위요소로만 취급하기 때문에 다양한 view들을 가질수 있지만, 이를 다시 말하자면, 다양한 model또한 가져야 한다.

컨트롤러를 통해 하나의 뷰와 하나의 모델이 연결되어있는 형태기 때문에 복잡한 화면 구성을 가지게 되는 경우에는 문제가 발생한다.

이러한 복잡한 구성을 massive ViewController라고 하며 mvc아키텍쳐의 한계를 보여준다.


패이스북 팀은 이러한 디자인 패턴들에서 발생하는 문제점을 해결하기위해 리액트라는 뷰 만을 신경쓰는 새로운 방식의 라이브러리를 제작했다.


Uploaded by N2T

반응형

' > 리액트' 카테고리의 다른 글

리액트 스터디 4탄) props  (0) 2022.07.12
리액트 스터디 3탄) virtual DOM  (0) 2022.07.12
리액트 스터디 2탄) 리액트란?  (0) 2022.07.12
useEffect에 대해서  (0) 2022.06.04
Link 와 useNavigate의 차이점  (0) 2022.06.03