[React] 1장. 리액트란?

겨레·2024년 11월 6일

📍 리액트(React)란?
리액트는 사용자 인터페이스를 만드는 데 사용되는 자바스크립트 라이브러리로 구조가 MVC, MVW 등인 프레임워크와 달리, 오직 V(View)만 신경 쓰는 라이브러리이다.

그렇다면, 자바스크립트(JavaScript)는 또 무엇일까?

👉 자바스크립트는 웹 브라우저에서 동작하는 프로그래밍 언어로 HTML과 CSS가 웹 페이지의 구조와 스타일을 담당한다면 자바스크립트는 웹 페이지의 동적인 기능을 제공한다. 이를 통해 사용자와 상호작용하는 기능을 구현할 수 있다.

👉 자바스크립트 기반의 프레임워크
Angular, Backbone.js, Derby.js, Ember.js, Ext.js, Knockback.js, Sammy.js, PureMVC, Vue.js


1. 프레임워크 아키텍처

1-1) MVC (Model-View-Controller)
Model, View, Controller로 구분되는 전통적인 디자인 패턴

  • Model : 데이터와 비즈니스 로직을 관리
  • View : 사용자가 보는 화면을 담당
  • Controller : Model과 View를 연결하며, 사용자의 요청을 처리하고 데이터를 View에 전달


1-2) MVVM (Model-View-ViewModel)
애플리케이션에서 자주 사용되며, 특히 단방향 데이터 흐름과 상태 관리 방식이 React와 가장 유사한 패턴

  • Model : 애플리케이션의 데이터와 비즈니스 로직을 담당
  • View : UI를 담당하며, 사용자와 상호작용
  • ViewModel : View와 Model을 연결하는 중간 역할을 하며, View와 데이터 바인딩을 처리


1-3) MVW (Model-View-Whatever)
Model-View-Whatever 패턴으로, View와 Model이 있으며, 그 사이를 연결하는 역할에 있어 유연함을 추구하는 패턴

  • Whatever는 *(Asterisk)의 의미를 가져서 다양한 디자인 패턴을 지칭하는 의미로 사용 된다. AngularJS가 해당 개념을 선언하면서부터 등장하게 됐다.




+) 참고하면 좋을 것 같아서 링크 걸어둠! 친절하게 피그마로 정리를 깔끔하게 해 주심.
(MVW는 없는 것 같음)

👉 https://buly.kr/5fBNsHk

profile
호떡 신문지에서 개발자로 환생

0개의 댓글