[공식문서] JavaScript에서 React로

Rendering User Interfaces

 

React의 작동 방식을 이해하려면, 먼저 브라우저가 코드를 해석하여 상호 작용 가능한 사용자 인터페이스(UI)를 생성하는 기본 개념을 이해해야 합니다.

사용자가 웹 페이지를 방문하면 서버는 브라우저에 HTML 파일을 반환합니다. 이 HTML 파일은 다음과 같을 수 있습니다.

Next.js 공식문서 - HTML 구조

그런 다음 브라우저는 HTML을 읽고 문서 객체 모델(DOM)을 구성합니다.

 

DOM이란 무엇인가요?

DOM은 HTML 요소의 객체 표현입니다. 이것은 코드와 사용자 인터페이스 간의 다리 역할을 하며 부모 및 자식 관계를 가진 트리 구조로 이루어져 있습니다.

 

Next.js 공식문서 - DOM 구조

 

DOM 메서드와 JavaScript와 같은 프로그래밍 언어를 사용하여 사용자 이벤트를 수신하고 DOM을 선택하고 추가하며 업데이트하고 삭제하여 사용자 인터페이스에서 특정 요소를 조작할 수 있습니다. DOM 조작을 통해 특정 요소를 대상으로 할 뿐만 아니라 스타일과 내용을 변경할 수도 있습니다.