React 기초:

1. 리액트(React)

페이스북(메타)에서 개발한 자바스크립트 라이브러리.

화면 출력에 특화되어 있다.

 

1) 리액트의 특징

 

(1) 컴포넌트(Component)

재사용이 가능한 각각의 작고 독립적인 모듈. 마치 레고 블럭...

이미 만들어진 컴포넌트들을 조합하여 화면을 효율적으로 구성하는 것이 리액트의 특징.

 

🌟 컴포넌트의 구성요소

 

• 프로퍼티(Props)
• state
• 컨텍스트(Context)

 

(2) 가상돔(Virtual DOM)

 

✍🏻 브라우저에서 화면을 렌더링하는 과정

서버로부터 받는 파일을 파싱하여 DOM Tree와 CSSOM Tree를 만들고 결합 : 렌더트리(Render Tree) 생성.

생성한 Render Tree로  Layout을 계산하고 만든 후, 이 요소들을 실제로 화면을 그리는 Paint를 한다.

 

  DOM + CSSOM → Render Tree

 

• DOM(Document Object Model) Tree 

    HTML 파일을  파싱하여 구조화하여 표현한 것.

 

• CSSOM(CSS Object Model) Tree

    CSS 파일을 DOM처럼 파싱하고 구조화하여 만든 것.

 

DOM은 아주 작은 변경사항이 있더라도 항상 리렌더링을 하고 이때 문제점 발생

= 화면이 커지면 커질수록 화면을 그리는 시간이 길어지는, 즉 속도가 느려지는 것.

 

따라서 가상돔(Virtual DOM)을 사용.

 

🌟 리액트가 가상돔(Virtual DOM)을 반영하는 절차

① 변경사항 발생 → 전체 UI를 Virtual DOM에 리렌더링.

② 이전 Virtual DOM과 현재를 비교 : 가상돔끼리 비교

③ 변경된 부분만 실제 DOM에 업데이트

 

즉, 간단히 요약하자면:

기존 : 화면의 일부가 수정되면 화면 전체를 업데이트.

가상 DOM 도입 : 이전 UI에서 변경된 부분만 반영하여 업데이트