리액트 컴포넌트와 JSX 문법: Virtual DOM의 기본 이해

리액트(React)는 현대 웹 개발에서 중요한 역할을 하는 라이브러리입니다.
리액트의 핵심 개념과 JSX 문법을 간단히 설명하겠습니다.

---

리액트는 UI를 컴포넌트 단위로 나눕니다.

React컴포넌트 작업 구조를 그림으로 표현

 

각 컴포넌트는 트리 구조를 형성하며, 이 구조는 실제 DOM과 유사합니다.

리액트의 컴포넌트 구조는 DOM형식과 같다

컴포넌트 트리는 DOM과 같은 형태로 구성됩니다.

 

리액트는 Virtual DOM을 사용하여 성능을 최적화합니다.
Virtual DOM에서 변경 사항을 적용한 후, 실제 DOM에 필요한 부분만 업데이트하여 효율적으로 렌더링합니다.

---

리액트에서는 JSX(Java Script XML) 을 사용합니다.
(강제는 아니지만 권장,, 매우매우 높은 빈도로 사용중입니다.)

JSX는 JavaScript 안에서 HTML을 작성할 수 있는 문법입니다.
컴포넌트를 정의하고, render 함수를 사용하여 UI를 그립니다.

JSX 문법

데이터(props, state)가 변경되면, 리액트는 자동으로 render를 호출하여 UI를 다시 그립니다

리액트를 제대로 활용하려면 기초 컴포넌트를 만들어야 합니다. 이 과정에서 컴포넌트 구조와 JSX 문법을 이해하는 것이 중요합니다.