리액트 톺아보기

#React

리액트가 필요했던 이유

2013년도 공식 블로그를 보면 리액트가 왜 필요했는지 나옴.

  • MVC 프레임워크가 아니다.
  • 업데이트가 간단해졌다.

    • 리액트의 특징

  • 선언형 프로그래밍
  • 컴포넌트 기반의 UI표현
  • Virtual DOM - DOM을 복제한 자스 객체

    • 브라우저의 렌더링 과정

    Render Tree - 웹페이지의 청사진

    Layout - 화면에 나타날 요소들의 위치와 크기를 지정

    Paint - 실제 요소를 화면에 구현

    1. 불러오기

    : 로더(Loader)가 서버로부터 전달받은 리소스 스트림을 읽는 과정

    2. DOM, CSSOM 생성

    웹 엔진의 HTML/XML 파서가 문서를 파싱해 DOM Tree를, CSS 파서가 CSSOM 트리를 생성(아래 파싱, 스크립트와 스타일 시트의 진행순서 참조)

    3. 생성된 DOM과 CSSOM으로 렌더링 트리 생성

    DOM Tree + CSSOM Tree, 렌더링에 필효한 노드만 선택해 페이지를 렌더링하는데 사용

    4. css, 레이아웃

    : 렌더트리를 토대로 그려질 노드와 스타일, 크기를 계산

    렌더링 트리에서 위치, 크기등을 알 수 없기 때문에 객체들에게 위치 크기 등을 정해주는 과정, css는 선택자에 따라서 적용되는 태그가 다르기 때문에 모든 css 스타일을 분석해 태그에 스타일 규칙이 적용되게 결정

    5. 그리기

    : 렌더트리의 각 노드를 실제 픽셀로 변환 ➡️ 실제로 그리는 작업을 실행

    *JS로 DOM, CSSOM을 변경하는 경우 리렌더링

  • 리플로우: 레이아웃 계산을 다시 하는 것
  • 리페인트: 재결합된 렌더 트리를 기반으로 다시 페인트를 하는 것

    • 잦은 리플로우/리페인트는 성능 저하의 주범이다.

    https://velog.io/@zaman17/기술면접대비-브라우저-렌더링-순서와-원리

    → 변경 사항을 모아서 한 번의 DOM 수정 요청을 해야. - 리액트의 Virtual DOM이 그 역할을 함.

    ⇒ 대부분의 상황에 충분히 빠른 업데이트를 보장함.

    리액트의 Reconciliation

    - virtual DOM은 어떻게 만들어지고 어떻게 생겼을까

    - 2개의 virtual DOM을 비교?

    createElement - React Element 객체를 반환하는 함수

    React Element들은 virtual DOM의 하나의 node가 된다.

    virtual DOM - React 컴포넌트 함수들의 모임

    React Element를 까보면,

    property중에 type - 컴포넌트

    두 개의 Virtual DOM은 어떻게 비교될까 - Diffing Algorithm(휴리스틱)

  • 두 트리를 레벨 별로 비교
  • 다른 타입의 Element - 트리를 새 구성
  • 같은 타입의 DOM Element - 변경된 속성만 갱신
  • 같은 타입의 Component인데 Props만 달라진 경우
  • list Element 수정시

    • 리액트로 화면을 업데이트 해야 할 때 유의할 점

  • 불필요한 Element 업데이트 타입 업데이트
  • Key를 사용하지 않는 목록 렌더링
  • Index로 Key를 사용하는 경우