[React] React 다섯 가지 특징

 

 1. Virtual DOM

• 가장 중요한 요소
• DOM(Document Object Model) HTML 블록 하나 하나의 요소를 객체(Obeject)라고 하는데 이 객체를 DOM 객체라고 보면 된다.
• Javascript나 jQuery 라이브러리를 사용하는 경우 DOM에 바로 접근하거나 jQuery 메소드를 사용하여 접근했어야 했다.
• SPA : Single Page Application 특정한 기능이나 데이터 요청을 했을 때 해당 하는 페이지를 새로고침하거나 이동하는 작업 없이 현재 페이지에서 모든 데이터의 변환 처리과정 이동이 모두 이루어 지는 것
• 네이버 모바일 페이지를 예로 들었을 때 어떠한 버튼이나 이벤트 실행 시 페이지 전체가 리로드 되면서 DOM 구성이 바뀌게 된다.(F12를 눌러 개발자 도구를 킨 상태에서 더 자세히 확인 가능)
• 해당하는 document의 데이터 일부를 출력하기 위해 DOM Tree를 전부 reloading 해야 한다.
• React가 적용된 instagram 모바일 페이지로 이동하여 버튼을 클릭하여 이벤트 발생 시 전체 DOM tree가 reload되지 않고 필요한 부분만 업데이트 되어 사용자가 페이지 전체 랜더링을 기다릴 필요없이 업데이트 된 DOM만 선택적으로 변경되는 것만 보게 된다.(F12를 눌러 개발자 도구를 킨 상태에서 더 자세히 확인 가능)
• 예를 들어 채팅앱에서 메시지를 보냈는데 계속 화면이 변하게 되는 것이 아니라 업데이트된 부분만 선택적으로 보여주는 것을 말한다.
• 즉 Virtual DOM을 사용하여 해당하는 객체를 선택적으로 실제 DOM에서 찾아 업데이트, 비교 과정을 통해 실질적으로 선택된 부분만 업데이트 한다.

   2. Only View, NO MVC-

• 일반적으로 프로그래밍 시 여러가지 패턴이 있다.
• Angular는 MVC(Model View Controller)를 사용한다.
• 지정하는 데이터 기존의 데이터든 데이터베이스에서 가져오든 이 데이터를 Model이라 함
• View는 화면에 보이는 UI 요소
• Controller모델과 View를 제어하고 연결, 제어, 관리하는 역할
• 즉 MVC 패턴은 데이터를 연결 제어 관리하여 사용자에게 보여주는 과정이 다 분리되어 있다.
• 대규모 어플리케이션을 사용할 때 MVC패턴을 통해 개발할 경우 MVC 패턴으로 나눠서 독립적으로 하는 과정들이 굉장히 무거워지고 불필요해지는 경우가 많이 있다.
• 실제 facebook이나 instagram처럼 대용량 기반의 웹서비스를 개발하다가 MVC패턴의 한계를 느끼고 좀 더 단순하게 모델을 나누지 않고 View 하나만 고려하여 개발
• View 하나만 고려하는 것은 데이터 단방향과 관련이 있고 이것은 차후 Redux에서 실습할 예정
• 즉 React에서는 모든 것이 View다.

   3. Reusable Componets

• React는 Components 기반의 UI Library다.
• Library(대표 예: React)가 Framework(대표 예: Angular)에 비해 특수한 장점들이 있다.       
• 퍼포먼스(속도)가 빠르다.
• 모든 것을 View로 보는 UI랜더링을 위한 UI 라이브러리다 보니 데이터 처리나 다른 컨트롤러가 필요한 작업들은 Redux를 사용하던 데이터 바인등은 선호하는 방법으로 개발할 수 있도록 최소한의 기능만 제공
• 해당하는 core 모듈을 최소화(용량을 경량화)함
• 용량이 작다는 것은 초고속 인터넷이 발달한 우리나라의 경우 큰 차이를 못느끼지만 퍼포먼스적인 관점에서 볼 때는 1kb, 1byte라도 작은 것이 굉장한 장점이 된다.
• 이러한 장점에서 볼 때 재사용 가능한 컴포넌트는 굉장한 장점이 된다.
• 최소한의 모듈만 코어 모델로 만들어 놓고 사용자 측에서 굉장히 많은 재사용 가능한 컴포넌트를 생산할 수 있도록 코어 모듈을 설계해둔 것이다.
• 즉 모든 react 요소들은 컴포넌트 기반이기 때문에 리액트 기능은 최소화 하였지만 사용자 계층에서 재 사용 가능하도록 하는 컴포넌트 기반의 라이브러리이다.
• 즉 특정한 모듈을 의존성을 갖는 것이 아닌 일반적으로 재사용가능한 컴포넌트로 만드는 것이 React를 개발할 때 굉장히 중요한 핵심이다.
• React Hooks을 통해서 Functional Programming의 기반의 컴포넌트를 만들 수 있도록 혁명적인 변환이 이루어졌다. (차후에 React Hook에 대해서도 다룰 예정)

   4. Hot reloading

• React 코딩한 결과를 확인하기 위해서 페이지를 수정할 필요 없이 수정한 즉시 웹 페이지가 Reloading 되면서 결과를 확인할 수 있는 것

   5. Hot reloading (Feat.SEO)

 

• 기존의 single page Application의 고질적인 문제인 검색 엔진 최적화 문제를 해결할 수 있다.
• 가장 큰 장점은 고성능이 아닌 모바일에서 버벅 거리거나 끊기는 것을 해결할 수 있는 기술
• 보통 랜더링은 클라이언트 단에서 하지만 백엔드와 함께 기능을 연동을 하여 node.js 단에서 페이지 랜더링을 하는 것