Props로 받은 부모의 State가 바뀐다면?

개요: Props, DOM, 라이프사이클, Re-rendering

컴포넌트와 props가 어떤 과정을 거쳐 화면에 나타나는지 설명하기 위해
라이프 사이클과 DOM, properties를 간단히 알아보겠습니다.
State and Lifcyle https://ko.reactjs.org/docs/state-and-lifecycle.html

Component의 라이프사이클

Component의 lifecycle이란 컴포넌트가 생성, 수정, 제거를 거쳐서
눈에 보이게 된 순간부터 사라지는 순간까지 과정을 말합니다.

• DOM이 Update/Re-rendering 되는 경우 4가지

  1. new props: 새로운 property가 추가 되었을 떄 ex) 새 게시물

  2. setState(): State의 값이 바뀌었을 때 ex) 게시물 수정

  3. 부모 컴포넌트가 Update(리랜더링)되었을 때

  4. forceUpdate(): 강제로 업데이트하였을 때

---

DOM? 가상 DOM?

1. DOM
   • DOM, Document Object Model이란, 트리 구조의 객체 모델을 의미합니다.
   • ex) document.getElementById('App')
     document.addEventListener('DOMContentLoaded', sayHello);
     

2. Virtual DOM
   • 가상 돔, Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신
     추상화된 자바스크립트 객체를 구성해 사용할 수 있습니다.
   • 가상 DOM은 DOM의 상태를 메모리에 저장하고,
     변경 전과 후의 상태를 비교해서 필요할 때, 필요한 내용만 반영합니다.

---

Props란?

• Properties의 줄임말로, 상위 컴포넌트가 하위 컴포넌트에게 값을 전달할 때 사용합니다.
• 단방향 데이터 흐름을 가지며, 자식은 Props을 수정할 수 없습니다.

  // 하나씩
  <Card name="홍길동" />
  
  // 객체
  const person = {name: '홍길동', age: '20'}
  <Card user={{person}} />

부모의 State가 바뀌었다면...

1. DOM과 가상 DOM을 같은 값을 가지고 있음

   • {name: "가"} ⇒ .setState(name : “나”)

2. 전체 UI를 가상DOM에 리랜더링 합니다.

   1. 가상 돔에서의 리랜더링
      • 부모A가 가지고 있는 State데이터가 변경됨
      • State값이 바뀌었기 때문에 자식B에게 보내는 Props값이 바뀜
      • 자식B는 Props값이 바뀌었기 때문에 name을 다시 그림

3. 이전 가상 DOM의 내용과 현재 가상 DOM의 내용을 비교

4. 바뀐 부분만 실제 DOM에 적용한다.

돔을 건드리는 횟수가 줄어들어, 연산을 빠르게 할 수 있다.

사이트 구조에 따라서 성능이 좋아지거나, 오히려 나빠질 수 있다.
전체 그리기 ↔ 작게 여러번 그리기