<aside> 💡 25분 React 문서 중 관심가는 챕터 읽고, 문제로 하나 뽑아보기

</aside>

핵심 주제

등장배경과 철학, virtualDOM, 재조정(reconciliation), LifeCycle, ReactHook

주의사항

! 등장배경과 철학

[ Q1. React에서 강조하고 있는 3가지 특징은? ] - 링크

<aside> 💡 1) 선언형 2) 컴포넌트 기반 3) 라이브러리로 anywhere

</aside>

(1) 선언형

• View에 대한 선언형으로 작성
• 데이터 변경에 따른 최적화 및 렌더링 고려하지 않아도 됨

(2) 컴포넌트 기반

• 상태를 가지는 컴포넌트를 통해 복잡한 UI를 구성할 수 있다
• DOM과 분리된 상태를 가짐

(3) 라이브러리로 anywhere

• 라이브러리로, 다른 기술 스택에 영향주지 않음 (유연성)
• React Native등 앱 개발도 가능

[Q2. 단방향으로 데이터 흐름을 제어하는 이유] 링크

• 흐름 : 등장배경 > 장점
  • 선언형프로그래밍을 위해 ⇒ 함수형 === 선언형 동일? ⇒ 안 동일
    • 명령형(for문) ↔ 선언형(고차함수)
    • 정확도?
• 준혁 : (뇌피셜) 리액트의 함수형 패러다임과 흐름이 같기 때문에 이해하기 쉽다
• 공홈 : 데이터 흐름을 명시적으로 보이게 만들어서 프로그램이 어떻게 동작하는지 파악

! VirtualDOM

[Q1. VirtualDOM이란 -공식문서]

• 흐름: virtualDOM 은 - 다. ⇒ react에서는 virtualDOM을 통해 ~ 한다.
  • 준혁 : javascript Object로 DOM을 표현한 것
    • react에서는 상태의 변화를 감지하고, 변화들을 모아서 1tick에 업데이트를 할 수 있도록 렌더링 최적화도 해준다.
    • 실제 DOM은 변화가 발생할 때마다 reflow, repaint가 발생한다. virtual dom은 변화들을 모아 reflow, repaint를 최소화 해준다.
  • 인수 : 실제 DOM 구조를 객체의 트리로 만든 것
  • 창민 : html dom을 메모리 상에서 표현한 것
  • 수경 : Virtual DOM은 React, Vue와 같은 선언적 웹 프레임워크에서 사용되는 DOM을 표현한 객체이다. 비효율적인 렌더링과 최적화 및 유지보수가 어려워지는 문제를 해결하기 위해 나온 기술이다.
• [Q1.1 virtualDOM을 통해 결국 하고자 하는 것은? 정리필요]
  • 재조정 과정을 통한 reflow, repaint 횟수 최소화
    • 변화가 발생한 부분만 리렌더링
  • 선언적 API를 가능하게 함 (UI상태를 알리면 DOM이 그 상태와 일치하도록 함)
  • 내용

! 재조정

[Q1. 리액트의 내부 작동 원리를 재조정 (Reconciliation) 개념과 함께 설명하세요. ]

• 흐름 : 가상 돔과 실제 돔이랑 동기화 시키는 과정이다. + diffing알고리즘 언급
  • 가상 돔에서 변한 파트(비교 알고리즘을 통해 얻고)를 실제 돔에 옮겨야 하는데 ⇒ 동기화, 일치시킨다
• 준혁 : 이전에 반환된 가상 dom과 현재 가상 dom 트리를 비교하여 변화가 있는 부분을 찾아 dom을 업데이트를 하는 과정
• 인수: (꼬리질문) 변한 부분을 어떻게 react에서 감지하나요? (diffing알고리즘)

[Q2. 비교 알고리즘] 출처