React 와 Vue에 대하여

 

 

[공통점]

 

등장배경: 기존 mvc framework를 개선하기 위해

MVC (Model View Controller)의 단점은?

1. 사이트에 뭐라도 하나 (데이터가)변경된다면 페이지 전체를 리로딩 해야되는 불편함

    >> ajax 기술 등장 이후 특정 부분만 수정해서 불러오게 js 명령을 내릴 수 있게 되었지만, 

         전부 일일이 코딩해야 하는 번거로움

2. 플랫폼에 따라(pc 브라우저, 모바일 브라우저, AOS 앱, iOS 앱) 서버로 요청을 하면 db에서 정보를 찾아서, html/css/js로 렌더링하고 보내줌 (front, backend 의 개념이 지금과 조금 다른 이유)

     >>  서버에서 데이터만 보내줘도 브라우저에서 html, css, js로 렌더링을 해낼 수 있다면 유저가 어디에서 요청을 하든 동일한 작업을 수행해서 데이터를 전송만 하면 된다. 서버 개발자는 데이터를 전송하는 것에만 집중을 할 수 있게 된다.

     >> 브라우저에서도 동작하는 강력한 라이브러리나 framework를 만들면 가능하지 않을까?

     >> SPA framework 등장

1.  서버에서 정적 웹처럼 html, css, js로 된 코드들을 브라우저에 전송
   • 여기서 js 코드가 주어진 데이터에 따라 html 웹페이지를 렌더링
   • 동적웹에서 서버가 하던일을 사용자의 컴퓨터에서 브라우저가 해내도록 함
2.  서버에서 데이터를 받아와야 할 때마다 요청을 보내서 반환된 데이터로 사이트 내용을 갱신함
   • 사이트에서 뭘 할 때마다 새로 접속하지 않고 한번 로드된 화면에서 많은 기능이 사용 가능

 

---

 

[각자의 특성]

 

• React
  • 대표 use case : facebook, instagram, airbnb, netflix
  • 사실 framework보다는 library 개념이 강하다
  • Typescript 지원
  • JSX 기반의 Component : js와 xml이 공존하는 jsx로 컴포넌트들을 관리
    • 변화가 일어나면 기존의 DOM과 비교하여 변화가 일어난 곳만 업데이트할 수 있음
    • 프로젝트 관리가 수월하고 테스트할 때도 좋음

• Vue
  • 대표 use case : xiaomi, grammarly, alibaba, adobe
  • React에 비해 Typescript 지원이 조금 미흡한 편
  • Single File Component : html, css, js 를 .vue 확장자의 단일 파일에 정의한다