왜 쓰는가?
Virtual DOM
빨간 부분에 수정사항이 생기게 되면 Virtual DOM은 달라진 값을 탐지하여 변경하고 최종적인 결과물을 실제 DOM에 전달함. 만약 Virtual DOM이 없었더라면 DOM은 변경된 빨간 부분뿐만 아니라 모든 동그라미들을 빨간색으로 바꿔서 렌더링 하기 때문에 비효율적
JSX
Vanilla js 에서의 DOM 조작
document.querySelector(".container").innerHTML = "<div>" + text + "<div>";React 에서의 DOM 조작(JSX)
<div className="container"> <div>{text}</div> </div>코드가 간결해지고 가독성이 좋아짐
Component
- 재사용
- 단일책임(캡슐화)
- 가독성
단점
필요한 자바스크립트 파일을 모두 다운로드하기 때문에 로딩시간이 길고, 그동안 사용자는 빈 화면을 봄
