본문 바로가기

Javascript/React

[React] React 다섯 가지 특징

728x90
반응형

 

 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 단에서 페이지 랜더링을 하는
728x90
반응형