React는 어떻게 작동하나요?

Source: Dev.to

컴포넌트가 기본이다

React 앱은 컴포넌트들로 구성됩니다. 컴포넌트는 UI를 반환하는 JavaScript 함수에 불과합니다.

function App() {
  return 
}

안녕하세요

JSX (JavaScript XML)

JSX는 HTML처럼 보이지만 HTML이 아닙니다. React는 JSX를 JavaScript 객체로 변환합니다.

안녕하세요

React.createElement("h1", null, "Hello");

가상 DOM

React는 실제 DOM의 가벼운 JavaScript 객체 복사본인 가상 DOM을 생성합니다. 이를 실제 건물이 아니라 설계도라고 생각하면 됩니다.

렌더링 흐름

초기 렌더링

JSX → Virtual DOM → Real DOM

상태 변경

JSX → New Virtual DOM
        ↓
Compare with Old Virtual DOM
        ↓
Find differences
        ↓
Update ONLY required parts in Real DOM

처음에 React는 JSX를 가상 DOM으로 변환하고 이를 사용해 실제 DOM을 생성하므로 UI가 화면에 나타납니다. 상태가 변경되면 React는 즉시 실제 DOM을 건드리지 않고, 대신 컴포넌트를 다시 실행하여 업데이트된 상태를 기반으로 새로운 가상 DOM을 생성합니다. 그런 다음 React는 새로운 가상 DOM을 기존 가상 DOM과 비교하여 어떤 부분이 바뀌었는지 정확히 파악합니다. 차이를 찾은 뒤, React는 전체 페이지가 아니라 실제 DOM에서 영향을 받은 부분만 업데이트합니다.