리액트는 프론트 엔드에서 가장 많이 사용하는 프레임워크입니다.
이번 글에서는 리액트의 핵심이라고 할 수 있는 동작 원리에 대해서 알아보고자 합니다.
DOM
DOM은 웹 페이지를 프로그래밍 언어로 제어할 수 있게 해주는 인터페이스입니다.
HTML 문서의 요소들을 트리 구조로 표현해서, 각 요소에 접근하고 조작할 수 있게 해줍니다.
<!DOCTYPE html>
<html>
<head>
<title>예시 페이지</title>
</head>
<body>
<div id="root">
<h1>제목</h1>
<p>내용</p>
</div>
</body>
</html>document
└── html
├── head
│ └── title
│ └── "예시 페이지"
└── body
└── div#root
├── h1
│ └── "제목"
└── p
└── "내용"이렇게 HTML 문서를 트리 구조로 표현할 수 있습니다.
DOM을 직접 조작하는 것은 비용이 높습니다.
DOM이 변경될 때마다 브라우저는 요소의 위치와 크기를 다시 계산해야 하고,
변경된 요소를 다시 그리는 작업이 필요합니다.
또한, 한 요소의 변경이 다른 요소에 영향을 끼칠 수 있습니다.
리액트의 동작 원리
리액트는 Virtual DOM을 통해서 DOM 조작의 비효율성을 해결합니다.
Virtual DOM은 실제 DOM의 복사본으로, 자바스크립트 객체 형태로 메모리에 존재합니다.
리액트는 다음과 같은 과정을 통해 화면을 업데이트합니다.
- 상태(state)가 변경
- Virtual DOM에 새로운 UI를 렌더링
- 이전 Virtual DOM과 현재 Virtual DOM을 비교
- 실제로 변경된 부분만 실제 DOM에 적용
글을 끝까지 읽어주셔서 감사합니다.
틀린 내용이 있다면 댓글로 지적 부탁드립니다.
'JavaScript' 카테고리의 다른 글
| [Redux] 개념과 React에서의 활용 (0) | 2024.11.04 |
|---|---|
| [React] 리액트의 useState (1) | 2024.11.01 |
| [TypeScript] 클래스 알아보기 (0) | 2024.10.29 |
| [TypeScript] 타입스크립트 알아보기 (0) | 2024.10.28 |
| [JavaScript] 실행 컨텍스트와 렉시컬 환경 (0) | 2024.10.22 |