✍️
TIL
  • TIL
  • react
    • react 16.3 이후 라이프 싸이클
    • 함수형 컴포넌트 vs 클래스 컴포넌트
    • React의 장점
    • 기본문법
    • Flow Diagram
    • redux-saga
    • nextjs
    • mobx
    • 리액트는 어떻게 동작할까?
  • data-structure
    • 이진 검색 트리(binary search tree)
    • HashTable
    • Tree
    • 트라이(Trie)
    • 선형 구조 vs 비선형 구조
    • 연결 리스트(linked-list)
    • Queue
    • Graph
    • Heap
    • Stack
  • web
    • 웹 브라우저의 동작 원리
    • Basic
    • Webpack이란?
    • rendering
    • npm
    • babel
  • graphQL
    • Query
    • Mutation
    • Introduction
  • algorithm
    • big-o
    • 버블 정렬(bubble sort)
    • 힙 정렬(heap sort)
    • 선택 정렬(selection sort)
    • 퀵 정렬(quick sort)
    • 백트래킹 알고리즘
    • 삽입 정렬(insertion sort)
    • 계수 정렬(counting sort)
    • 다엑스트라 알고리즘
    • 이진 탐색
    • 합병 정렬(merge-sort)
    • 동적 계획법(Dynamic programming)
  • web-security
    • XSS(Cross Site Scripting)
    • CSRF(Cross-site request forgery)
    • Tabnabbing
  • javaScript
    • dom
    • 자바스크립트 성능 최적화
    • Event Loop
    • Snippets
    • javaScript
  • programming-paradigm
    • Object Oriented Programming
    • 함수형 프로그래밍
    • 구조적 프로그래밍
  • computer-science
    • Process vs Thread
    • 비트 연산자
    • 그레이 코드
  • vue
    • Vue
  • design-pattern
    • MVP pattern
    • Flux
    • 아토믹 디자인
    • MVVM pattern
    • MVC pattern
  • css
    • css
    • Grid
    • css-methodologies
    • FlexBox
  • html
    • html
  • regExp
    • regExp
  • git
    • Git-flow
Powered by GitBook
On this page
  • Reconciliation(재조정) 과정
  • Lists
  • Reference

Was this helpful?

  1. react

리액트는 어떻게 동작할까?

PreviousmobxNextdata-structure

Last updated 5 years ago

Was this helpful?

Reconciliation(재조정) 과정

ReactDOM.render()가 같은 컨테이너에 두번 호출되면 무슨 일이 일어날까요?

React의 목표는 주어진 React 엘리먼트 트리와 호스트 트리를 일치시키는 것입니다. 새로운 React 엘리먼트 트리가 전달됐을 때 호스트 객체 트리에 어떤 작업을 해야 할지 파악하는 프로세스를 이라고 부릅니다.

재조정 과정에서, 트리의 같은 위치에 있는 엘리먼트 타입이 이전 렌더링과 현재 렌더링 동일하면 React는 기존 호스트 객체를 다시 사용합니다.

// container 엘리먼트에 button 엘리먼트 렌더
// let domNode = document.createElement('button');
// domNode.className = 'blue';
// domContainer.appendChild(domNode);
ReactDOM.render(
  <button className="blue" />,
  document.getElementById("container")
);

// 변경할 엘리먼트의 타입이 같아서(button → button) 호스트 객체를 다시 사용할 수 있으므로 수정된 클래스 네임만 변경
// domNode.className = 'red';
ReactDOM.render(
  <button className="red" />,
  document.getElementById("container")
);

// 변경할 엘리먼트의 타입이 달라서(button → p) 호스트 객체를 다시 사용할 수 없으므로 새롭게 엘리먼트 렌더
// domContainer.removeChild(domNode);
// domNode = document.createElement('p');
// domNode.textContent = 'Hello';
// domContainer.appendChild(domNode);
ReactDOM.render(<p>Hello</p>, document.getElementById("container"));

// 변경할 엘리먼트의 타입이 같아서(p → p) 호스트 객체를 다시 사용할 수 있으므로 textContent만 변경
// domNode.textContent = 'Goodbye';
ReactDOM.render(<p>Goodbye</p>, document.getElementById("container"));

Lists

트리의 동일한 위치에서 엘리먼트 타입을 비교하면 일반적으로 재사용할지 다시 만들지 결정하기에 충분합니다.

하지만 위 방법은 자식들의 위치가 정적이고 순서를 바꾸지 않는 경우에만 작동합니다. 동적 리스트에서는 같은 순서인지 알 수 없습니다.

그래서 list가 다시 정렬된다면 React는 아이템 자체가 변화했지 순서가 변경됐다고 알진 못합니다.

key는 React에 렌더링 할 때마다 아이템이 다른 위치에 있다는 것을 알려줍니다.

React가 \ 안쪽의 \를 볼 때 이전 렌더링에서 \가 같은 \에 있었는지 검사합니다. 이 방법은 \의 자식 순서가 바뀌더라도 작동합니다. React는 같은 key를 가지는 이전 호스트 객체를 재사용하고 시블링 순서를 다시 정렬합니다.

Reference

재조정
https://overreacted.io/react-as-a-ui-runtime/