[React]Reconciliation에 대해 알아보자(재조정)

React 관련 교육 강의를 통한 정리

React는 선언적 API를 제공하기 때문에 갱신이 될 때마다 매번 무엇이 바뀌었는지를 걱정할 필요가 없다.

이는 애플리케이션 작성을 무척 쉽게 만들어주지만 React,내부에서 어떤 일이 일어나고 있는지는 명확히 눈에 보이지 않는다.

동기

하나의 트리르 가지고 다른 트리로 변환하기 위한 최소한의 연산 수를 구하는 알고리즘 문제를 풀기 위한 일반적인 해결책들이 있습니다. 하지만 이러한 최첨단의 알고리즘도 n개의 엘리먼트가 있는 트리에 대해 O(n^3)의 복잡도를 가짐

React에 이 알고리즘을 적용한다면, 1000개의 엘리먼트를 그리기 위해 10억 번의 비교 연산을 수행해야 함. 너무나도 비싼 연산. React는 대신, 두 가지 가정을 기반하여 O(n) 복잡도의 휴리스틱 알고리즘을 구현

1. 서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어낸다.
2. 개발자가 key prop를 통해, 여러 렌더링 사이에서 어떤 자식 엘리멘트가 변경되지 않아야 할지 표시해 줄 수 있다.

Shadow DOM은 Virtual DOM과 같은가요?

둘은 다르다. shadow DOM은 주로 웹 컴포넌트의 범위 지정 변수 및 CSS용으로 설계된 브라우저 기술 Virtual DOM은 브라우저 API 위에 있는 Javascript 라이브러리에서 구현되는 개념

Design Principles

리액트가 무엇을 하고 무엇을 하지 않는지에 대한 개발 철학

리액트의 스케쥴링 업데이트(setState가 비동기적인 이유)

합성

React의 핵심 기능은 합성입니다. 컴포넌트에서 state나 생명주기 메서드를 사용하는 것에 대해 "나쁜 것"은 없다.