리액트 왜 씀?

❓리액트란...

Facebook에서 개발한 JavaScript 기반의 오픈소스 라이브러

✨특징

• 가상 DOM과 동기화되어 변경 사항을 효율적으로 감지하고 업데이트한다.
• 재사용 가능한 컴포넌트를 이용해 UI를 구성한다.
• 데이터 흐름이 단방향으로 이루어진다.
• JSX 문법을 사용해 코드 가독성을 높인다.

---

리액트를 배우기 앞서서 알아야 할 것.

❓DOM

• Document Object Model의 약자. -> 문서 객체 모델
• DOM은 HTML 문서를 파싱해서 문서의 객체 모델을 생성한다.

[브라우저 렌더링 과정]

1. HTML 파싱:
   HTML 문서를 파싱하여 DOM 트리를 생성
2. CSS 파싱:
   CSS 파일이나 스타일 태그의 내용을 파싱하여 스타일 규칙을 생성
3. 렌더 트리 구성:
   DOM 트리와 CSSOM(스타일 트리)을 결합하여 렌더 트리를 생성
4. 레이아웃:
   렌더 트리를 기반으로 각 요소의 크기와 위치를 계산하여 레이아웃을 수행
5. 페인팅:
   레이아웃이 완료되면 화면에 픽셀을 그리는 과정인 페인팅이 수행

 

 

⚠️DOM은 새로운 요청이나 변경사항이 있을 때마다 매번 렌더링을 함.

[🔥CS 뽀개기] - 웹페이지가 렌더링되는 과정

웹페이지가 렌더링되는 과정

 

매번 렌더링하는 DOM의 약점 때문에 Virtual DOM이 나왔다.

❓Virtual DOM

• 리액트는 가상 DOM을 사용한다.
• 엘리먼트를 새로 렌더링할 때 리액트는 그 모습을 실제 DOM트리에 바로 반영하는 것이 아니라 가상 DOM에 적용한다.

리액트는 state 변경 전의 가상 DOM과 변경 후의 가상 DOM을 비교한다. 그래서 바뀐 부분만 찾아내고 각각에 해당하는 실제 DOM 노드를 변경한다.

개발자가 직접 DOM 노드를 신경쓸 필요가 없어 단순하고 깔끔한 코드를 작성할 수 있다.

변경 사항들을 리액트가 적당히 모아 적당히 나눠서 브라우저에 전달한다. → 변경사항들을 효율적으로 관리할 수 있다.

⚠️DOM vs Virtual DOM

	DOM	Virtual DOM
업데이트	느림	빠름
메모리	낭비 심함	낭비 덜함
새로운 엘리먼트 업데이트 방식	새로운 DOM 생성	가상 DOM 생성 후 이전 가상 DOM과 비교 후 바뀐 부분만 DOM에 업데이트