1. React를 한 단어로 정리하면?
→ React는 Component들의 모임이다 !
갑자기 작성했던 블로그들을 보는데 1주차 기록이 빠져있는 걸 보고 놀라서 여기저기 찾아보니 다 써놓고 임시글에 넣어두고는 업로드를 안했었다,,,🥲
늦게라도 업로드 하는즁.....
Component란?
- 한 가지의 기능을 수행하는 UI단위
- React의 특징
- 컴포넌트를 사용해 독립적 / 재사용성 Good!
- Virtual DOM 사용
- 각 리액트 애플리케이션은 하나의 컴포넌트로 이루어져 있다.
- 제일 상위 컴포넌트 = Root
- 즉, 리액트 애플리케이션은 각각의 독립적인 컴포넌트를 서로 조합한 것이라고 할 수 있다!
이처럼 트리 형식으로 구성된다
2. DOM? Virtual DOM
브라우저의 기본 개념 - DOM = Document Object Model
브라우저가 이해할 수 있도록 개발자들이 작성한 HTML의 태그들이 DOM Tree로 변환되어 브라우저에 표기된다. HTML같은 객체로 문서 구조를 표현하는 방법이라고 생각하면 된다.
하지만 DOM은 동적 UI에 최적화되어 있지 않고 HTML은 자체적으로 정적이라는 문제점이 하나 있다. 이를 해결하는 방법으로 등장한 것이 Virtual DOM이다 !
Virtual DOM
- 간단하게 말해서 리액트는 어떤 부분이 업데이트 되어야 하는지 계산 후 딱! 필요한 부분만 !! 업데이트한다. → 실질적으로 보여지는 데이터가 변동되지 않으면 돔트리에는
영향을 주지 않는다. - DOM 업데이트를 추상화해 DOM처리 횟수를 최소화하고 효율적으로 진행한다.
- 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리렌더링한다.
- 이전 Virtual DOM에 있던 내용과 현재 내용을 비교
- 바뀐 부분만 실제 DOM에 적용
⇒ Virtual DOM은 실제 DOM의 사본과 비슷한 역할을 한다고 보면 된다.
4. 브라우저 렌더링 원리
컴포넌트 안에는 데이터를 다루는 state와 사용자에게 UI를 보여주는 render함수가 있다!!
여기서 참고로 컴포넌트의 state가 변경되면 해당 컴포넌트의 하위 컴포넌트들도 변하기 때문에 state가 변경될 때마다 다른 컴포넌트들의 render함수까지 다 호출된다 !! (아래 그림 참고)
DOM 렌더링 순서
그렇다면 브라우저가 사용자에게 보여지기까지 어떻게, 어떤 순서로 렌더링될까?
브라우저에서 url을 입력하면
위와 같은 순서로 렌더링되어 우리에게 보여진다.
Github_qkrthdus605