[05] 2022.07.22

Rio·2022년 7월 22일
0

React

목록 보기
6/8

🧐 React?

기존의 웹 개발을 구현하는 방법에서 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유현한 JavaScript 라이브러리이다.
"컴포넌트"라는 작고 고립된 코드의 조각을 이용하여 복잡한 UI를 구성할수 있도록 도와준다.

  • SPA(Single Page Application)를 전제로 하고 있다.
  • Virtual Dom을 활용하여 업데이트 해야하는 Dom요소를 찾아서 해당 부분만 업데이트 하기에, 리렌더링이 잦은 동적인 모던 웹에서 빠른 퍼포먼스를 낼 수 있다.

주요 특징

  • 컴포넌트 기반
  • 선언형 뷰
  • JSX(JavaScript Extension)
  • Hooks
  • State & Props

참고

SPA (Single Page Application)

과거 웹 사이트는 문서 하나에 전달되는 파일 용량이 적었다. 완전히 새로운 페이지를 서버에서 전송해주는 것이 어렵지 않았다. 그러나 최근 웹 사이트에서는 한 페이지에 해당하는 페이지 용량이 커지고, 매번 새로운 페이지를 전달하는게 점점 버거워지게 되었다.
이러한 문제를 해결하기 위해 등장한 것이 SPA이다.
어떤 웹사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현하는 방식이다.

상호작용하기 위한 최소한의 요소만 변경이 일어난다. 페이지 변경이 일어난다고 보여지는 것도 최초 load된 자바스크립트를 통해 미리 브라우저에 올라간 템플릿만 교체되는 것이다.

Virtual Dom

브라우저의 WorkFlow

  1. Dom Tree 생성

    브라우저가 HTML을 받으면, 브라우저의 렌더 엔진이 이를 파싱하고 Dom 노드로 이뤄진 트리를 생성. 각 노드는 각 HTML 엘리먼트들과 연관

  2. Render Tree 생성
    외부 CSS 파일과 각 엘리번트의 inline 스타일을 파싱.
    스타일 정보를 사용하여 Dom트리에 따라 새로운 트리, 렌더트리 생성
    Dom트리의 모든 노드들은 'attach'라는 메소드가 존재.
    attach메소드를 통해 스타일 정보를 계산해서 객체형태로 반환.

  3. Layout
    Render Tree가 생성되면, layout과정을 거침.
    각 노드들은 스크린의 좌표가 주어지고, 배치가 된다.

  4. Painting
    렌더링 된 요소들에 색을 입힌다.
    트리의 각 노드들을 거쳐가면서 paint()메소드를 호출.

Dom에 변화가 생기면, 그때마다 렌더트리를 재생성하고, 모든 요소들의 스타일이 다시 계산한 뒤, 레이아웃을 만들고 페인팅 하는 과정이 반복된다.

장점

  • 브라우저의 연산량을 줄여준다.

복잡한 SPA에서는 Dom 조작이 많이 발생해, 변화를 적용하기 위해 브라우저가 많은 연산을 해야한다. 이는 전체적인 프로세스를 비효율적으로 만든다.
Virtual Dom은 뷰에 변화가 발생하면, 그 변화는 실제 Dom에 적용되기 전, 가상의 Dom에 먼저 적용시키고 그 최종적인 결과를 실제 Dom에 전달한다.
이를 통해 브라우저 내에서 발생하는 연산의 양을 줄이면서 성능이 개선된다.

  • fragment 관리의 자동화 및 추상화
    Virtual Dom은 fragment의 관리하는 과정을 자동화하고 추상화해준다. 이 작업을 직접 구현하려면 기존 값 중 어떤게 변경됐고, 변경되지 않았는지를 계속 파악하고 있어야한다. 이 과정을 Virtual Dom이 자동으로 관리해준다.

참고 문서

profile
우당탕탕 개발 기록지

0개의 댓글