[React] React as a UI Runtime_메모

🍭 호스트 트리

시간이 지남에 따라 변화할 수 있는 트리 출력.

외부 이벤트(상호작용, 네트워크 응답, 타이머)에 대한 응답으로 복잡한 호스트 트리를 예측할 수 있게 조작하는 프로그램을 작성하는 데에 유용.

 

안정성 - 호스트 트리는 비교적 안정적, 갱신할 때 전체를 뜯어고치지X

규칙성 - 무작위 형태X, 일관된 모습, 동작 UI패턴

 

🍭 호스트 객체(DOM노드)

리액트는 DOM api를 직접 호출X, 리액트가 처리

 

🍭 렌더러

create host instance and set the properties

 

🍭 React 엘리먼트

리액트에서 제일 작은 요소, 매번 새로 만들어짐

persistant X, Immutable O

 

🍭 Entry Point

ReactDOM.render(reactElement, domContainer)

domContainer(root div)에 reactElement 그려줘

 

🍭 Reconciliation (재조정)- 재귀적

If an element type in the same place in the tree “matches up” between the previous and the next renders, React reuses the existing host instance.

 

🍭 왜 직접 컴포넌트를 호출하지 않는가? (Form() 대신 <Form />이라고 쓰는 이유)

재귀적으로 호출된 후의 리액트 요소들만 보는 것보다는 컴포넌트를 “아는 것”이 리액트가 더 효율적으로 처리할 수 있기 때문

 

직접 호출했다면 즉시 실행

컴포넌트로 작성하면 React가 호출 시점을 결정할 수 있게 해줌 > 불필요한 렌더링을 피할 수 있음

 

렌더링 단계 : 리액트가 컴포넌트를 호출하고 재조정 수행, 비동기

커밋 단계 : 호스트 트리를 손보는 단계, 동기

 

🍭 Memoization

setState로 업데이트가 될 때, 자식 전체 트리를 재조정한다. 부모의 업데이트가 어떤 자식에게 영향을 주는지 알 수 없기 때문에 일관성을 위해 모두 갱신한다. 비용이 매우 클 것 같지만 중소형 하위트리에서는 괜찮음

 

트리가 너무 깊고 넓게 갱신된다면 트리를 memoize해서 이전 렌더링 결과를 재사용 가능하다. => 함수의 props가 이전 렌더링과 같다면 재조정 생략

 

리액트는 기본적으로 컴포넌트 메모X, 대부분의 컴포넌트들은 항상 다른 props를 받기 때문에 memoize하는 것은 비효율적일 수 있다.

 

🍭 Raw Models

리액트는 바뀐 것만 업데이트되도록 “reactivity”한 시스템을 사용하지 않는다!

변화에 영향을 받는 컴포넌트만 골라서 업데이트하는 것이 아니라 재조정을 한다.

이것은 의도적 설계. 왜냐면 시간, 메모리 낭비

Concurrent Rendering

 

🍭 Batching(일괄 작업)

리액트는 모든 이벤트핸들러를 실행시킨 다음 모든 변경사항을 한 번에 다시 렌더링한다.

 

🍭 Call Tree

리액트의 컴포넌트가 콜스택이 아닌 콜트리에 있다고 생각.

 

🍭 Effect

useEffect는 한 번만 실행되는 것이 아니다. 컴포넌트가 유저에게 처음 보여질 때, 업데이트된 후 모두 실행된다.

클린업 함수는 다음번에 이펙트를 적용시키기 전에, 컴포넌트가 사라지기 전에 실행된다.

 

🍭 Custom Hooks

상태는 독립적이다. 각각의 훅 호출은 각자 독립된 상태를 선언한다.

 

---

출처 📚

 

블로그 - Overreacted: React as a UI Runtime