reese.dev

리액트 톺아보기

date
May 8, 2023
slug
in-depth-react-preview
author
status
Public
tags
React
summary
type
Post
thumbnail
category
updatedAt
May 17, 2024 02:47 PM

리액트가 필요했던 이유

2013년도 공식 블로그를 보면 리액트가 왜 필요했는지 나옴.
  • MVC 프레임워크가 아니다.
  • 업데이트가 간단해졌다.
 

리액트의 특징

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

브라우저의 렌더링 과정

notion image
 
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(휴리스틱)

  1. 두 트리를 레벨 별로 비교
    1. reconciliation과정에서 무조건 트리의 루트 노드들 부터 비교함.
  1. 다른 타입의 Element - 트리를 새 구성
    1. Element의 타입이 달라지면 트리를 재구축 - tag의 type이 달라지는 (p→span) 달라진 노드 아래의 모든 트리 파괴 후 새로 모두 생성 - 가급적 tag의 타입 바꾸는 일 피하는게 좋겠찌…
  1. 같은 타입의 DOM Element - 변경된 속성만 갱신
    1. 해당 Property만 수정
  1. 같은 타입의 Component인데 Props만 달라진 경우
    1. 달라진 Props만 수정 - state초기화는 하지 않음
  1. list Element 수정시
    1. Key가 없으면 - 각 list목록별로 순서대로 비교 문제 발생하는 경우 - 중간에 insert되는 경우 - 다 다르다고 판단해 전부 업데이트 하게 됨. 그러니까 key prop이 중요한 것.
    2. Key가 있으면 - Key를 기준으로 비교함.
 
 

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

  • 불필요한 Element 업데이트 타입 업데이트
    • 변경된 엘리먼트 아래의 모든 트리 재생성을 유발하니까. - 비용 계산해서 꼭 필요한 경우라면 바꿀수도 있겠지만…
  • Key를 사용하지 않는 목록 렌더링
  • Index로 Key를 사용하는 경우
    • key 존재하면 key를 기준으로 리스트 아이템을 비교
    • 리스트 중간이나 앞에 아이템 삭제하거나 추가시 예상치 못한 동작 유발.