1. React란 무엇인가요?

React는 Facebook에서 개발한 UI 라이브러리로, 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다. React는 컴포넌트 기반 아키텍처를 사용하며, 선언적인 방식으로 UI를 작성할 수 있습니다.

React는 Virtual DOM(가상 DOM)을 사용하여 성능을 최적화합니다. Virtual DOM은 React에서 사용되는 가상의 DOM으로, 실제 DOM과는 별개로 존재합니다. React는 Virtual DOM을 사용하여 UI 변경을 최소화하고, 빠른 업데이트를 제공합니다.

React는 다른 라이브러리와 함께 사용할 수 있으며, 라우팅, 상태 관리 등을 위한 다양한 라이브러리와 도구가 있습니다. 이러한 라이브러리와 도구를 사용하여 React 앱을 보다 효율적으로 개발할 수 있습니다.

React는 대규모 애플리케이션에서도 유지보수하기 쉽고, 확장성이 좋습니다. 이러한 이유로, React는 많은 개발자들에게 인기 있는 프론트엔드 라이브러리 중 하나입니다.

초기 렌더링

React 애플리케이션의 초기 랜더링은 다음과 같은 과정으로 이루어집니다.

브라우저에서 React 애플리케이션을 로드합니다.

React는 Virtual DOM을 생성합니다. 이는 실제 DOM과 같은 구조이지만, 메모리에 존재하는 가상의 DOM입니다.

JSX 코드를 파싱하여 Virtual DOM의 엘리먼트(element) 트리를 생성합니다.

Virtual DOM 업데이트를 수행합니다. React는 Virtual DOM을 이용하여 실제 DOM과 비교하고, 변경된 부분만 업데이트합니다.

변경된 부분을 실제 DOM에 업데이트합니다.

React는 초기 랜더링 이후, 변경이 필요한 부분만 업데이트하므로, 빠른 속도와 효율성을 제공합니다. 또한, Virtual DOM을 사용하므로, 실제 DOM에 대한 직접적인 접근을 최소화하고, 코드의 복잡성을 줄일 수 있습니다.

React의 초기 랜더링은 브라우저에서 이루어집니다. 서버 측에서 초기 랜더링을 수행하는 서버 사이드 랜더링(Server Side Rendering, SSR)과 정적인 HTML 파일을 생성하는 프리랜더링(Pre-rendering) 방식도 있습니다. 이러한 방식을 사용하면, 초기 랜더링 속도를 더욱 높일 수 있습니다.

• 초기 랜더링

• 두 DOM 비교