왜 리액트 팀은 React와 React-DOM을 나누었을까?
react와 react-dom을 따로 설치해야 하는 이유
2024-12-02
React와 React-DOM의 차이점
React
사용자 인터페이스를 보다 편하게 개발하기 위해 등장한 JavaScript 라이브러리
React is a JavaScript library for creating user interfaces.
Thereactpackage contains only the functionality necessary to define React components. It is typically used together with a React renderer likereact-domfor the web, orreact-nativefor the native environments.
React-DOM
리액트로 개발한 결과물이 브라우저 DOM과 결합될 수 있도록 도와주는 라이브러리
This package serves as the entry point to the DOM and server renderers for React. It is intended to be paired with the generic React package, which is shipped as
reactto npm.
정리하자면 우리는 컴포넌트, 클래스, 엘리먼트 등을 사용할 때마다 React를 사용하고 있습니다. 또한 render(), findDOMNode()와 같은 메서드를 사용할 때마다 React-DOM을 사용하고 있습니다.
React와 React-DOM이 나눠지게 된 이유
과거에는 React와 React-DOM이 같은 팀에 의해 개발되었고 React 패키지 안에 함께 있었습니다. React 0.14 버전 까지 말이죠.
하지만 React는 사용자 인터페이스를 개발하기 위한 도구일 뿐이지 웹 생태계, 즉 브라우저에만 국한된 라이브러리는 아닙니다. React-DOM이 React가 브라우저와 통합되어 사용될 수 있도록 도와주는 라이브러리로 존재하는 이유이기도 합니다.
따라서 리액트 팀은 React와 React-DOM을 별도의 라이브러리로 분리하였습니다. 이 덕분에 React를 사용하는 React-Native와 같은 프레임워크가 개발될 수 있었습니다. React-Native는 React-DOM을 사용하지 않죠.
As we look at packages like
react-native,react-art,react-canvas, andreact-three, it's become clear that the beauty and essence of React has nothing to do with browsers or the DOM.
To make this more clear and to make it easier to build more environments that React can render to, we’re splitting the main react package into two: react and react-dom.
패키지 분리가 개발자 경험에 미친 영향
React와 React-DOM을 분리함으로써 개발자들이 얻은 여러 가지 이점이 있습니다. 이를 통해 더 효율적이고 확장성 높은 개발 환경을 구축할 수 있었는데요, 주요 포인트는 다음과 같습니다.
코드 효율성 향상
React와 React-DOM이 분리되기 전에는 브라우저가 아닌 환경에서도 React를 사용할 때 DOM 관련 코드가 함께 로드되는 문제가 있었습니다. React와 React-DOM을 분리함으로써, 웹이 아닌 다른 환경에서는 DOM 관련 코드를 불러오지 않아도 되어 로딩 속도가 빨라지고 불필요한 코드가 줄어드는 이점이 생겼습니다. 예를 들어, React Native 환경에서는 DOM 관련 코드가 전혀 필요하지 않기 때문에, React 라이브러리만 가져와 더 효율적으로 앱을 빌드할 수 있습니다.
유지보수와 테스트 효율성
React와 React-DOM이 분리되면서 개발자들은 각 라이브러리를 개별적으로 관리하고 업데이트할 수 있게 되었습니다. React에서 새로운 기능이나 개선 사항이 추가되더라도 React-DOM을 신경 쓰지 않고 바로 적용할 수 있는 점은 개발자 입장에서 큰 장점입니다. 또한 테스트 및 디버깅 과정에서도 React가 UI 로직에만 집중하도록 설계되었기 때문에, DOM과 관련된 문제는 React-DOM에서만 확인하면 됩니다. 이러한 구조는 오류 발생 시 원인을 파악하기 더 쉽고, 문제 해결을 신속하게 할 수 있는 장점이 있습니다.
React 18에서의 React-DOM 변경 사항
이제는 React 19를 기다리는 상황이지만 아직은 React 18이 stable한 버전이기 때문에 React 18에서의 주요 변경 사항에 대해 간략하게 살펴보겠습니다. React 18에서는 중요한 기능들이 추가되었고, React-DOM도 이러한 변화에 맞춰 새로운 기능과 최적화가 이루어졌습니다. 이를 통해 React 애플리케이션의 성능과 사용자 경험이 한층 강화되었습니다.
Concurrent Mode
React 18에서는 Concurrent Mode가 기본으로 도입되어, React-DOM이 작업을 더 효율적으로 처리할 수 있게 되었습니다. Concurrent Mode는 React 애플리케이션이 더 많은 작업을 동시에 수행할 수 있도록 돕는 새로운 렌더링 방식을 제공합니다. 예를 들어, 브라우저의 주 스레드를 막지 않고 애니메이션과 데이터 로딩을 동시에 실행할 수 있으며, 이를 통해 사용자 경험이 더욱 부드럽고 반응성이 좋아집니다. React-DOM은 이 모드에서 작업을 조정하고 사용자 입력에 즉각 반응하도록 최적화되어 있어 개발자들이 복잡한 상태 관리나 최적화 작업을 덜어줍니다.
새로운 API와 자동 배치(Auto Batching)
React 18에서는 자동 배치(Auto Batching) 기능이 추가되어 여러 상태 업데이트를 한 번에 처리하여 렌더링 횟수를 최소화할 수 있습니다. React-DOM은 이 기능을 통해 앱 성능을 개선하고, 특히 복잡한 컴포넌트 구조를 가진 대규모 프로젝트에서 큰 장점을 제공합니다. 예를 들어, 버튼 클릭과 같은 사용자 인터랙션에 따라 여러 상태가 업데이트될 때, 기존에는 각각의 업데이트마다 렌더링이 일어났지만, 자동 배치를 통해 단 한 번의 렌더링으로 업데이트를 처리할 수 있습니다. 이로 인해 성능이 크게 향상됩니다.
서버 사이드 렌더링(SSR) 최적화
React 18에서는 서버 사이드 렌더링이 더욱 최적화되었습니다. 특히, React-DOM의 renderToPipeableStream API를 통해 서버에서 스트리밍 방식으로 초기 페이지를 제공하고, 클라이언트에서 점진적으로 상호작용을 활성화할 수 있습니다. 이는 사용자에게 빠른 첫 화면을 제공하는 동시에, 자바스크립트 로딩이 완료될 때까지 상호작용을 차근차근 활성화할 수 있도록 도와줍니다. 이러한 스트리밍 방식의 SSR은 SEO와 초기 로딩 속도 측면에서도 많은 이점을 제공합니다.
www.npmjs.com
ko.react.dev