들어가며
React를 사용하여 웹 어플리케이션을 만들면 React, React-DOM 패키지를 사용하게 됩니다. 이 둘의 차이점에 대해 알아보도록 하겠습니다.
React
React 패키지는 components, state, props 와 같은 리액트를 사용하기 위한 코드들을 포함하고 있습니다.
React Dom
React-DOM 패키지는 이름에서 연상되는 것과 같이 React 와 DOM을 연결시키는 역할을 수행합니다. 대부분의 어플리케이션에서 볼 수 있는 것 처럼 index.thml에 React.render()를 사용하여 마운팅합니다.
왜 패키지를 분리하여 사용할까?
React 와 React-dom이 분리된 이유는 React Native(모바일 개발을 위한 리액트)에서 출발합니다. 리액트 컴포넌트는 UI를 구조화하기 좋은 라이브러리입니다. 이러한 이유로 기존에 웹 개발에서만 사용되던 리액트가 모바일로 확장하게 되었습니다. 리액트가 모바일 개발의 확장성을 가지게 되면서 웹 개발을 위한 React-DOM 과 모바일 개발을 위한 React-Native 가 분리되었습니다.
Learn once, write anywhere
React 의 슬로건은 아래와 같습니다.
Learn once, write anywhere
ReactConf 키노트에서 나온 말로 ‘한번 배우고, 여러곳에서 작성해라’ 라는 의미입니다. 리액트는 한번 배우면 여러 조합을 통해 다양한 곳에서 사용 할 수 있습니다. React 기반으로 비즈니스를 구성하면 아래와 같이 다양한 플랫폼 환경에 맞춰서 개발 할 수 있습니다.
- React DOM
- 웹 서비스
- React Native
- 모바일 서비스
- React Native for Desktop
- 윈도우 & MacOs 서비스
- ink
- CLI 렌더러
이 외에도 아래 깃허브에서 다양한 Renderer 를 확인할 수 있습니다.
https://github.com/chentsulin/awesome-react-renderer
리액트는 슬로건에 걸맞게 한번 배우면 다양한 여러 조합을 통해 다양한 곳에서 사양 할 수 있도록 제작되었습니다. React 패키지와 React-Dom 패키지를 분리는 확장성을 위한 방책이라고 볼 수 있습니다.
출처
React vs ReactDOM
React.js Conf 2015 Keynote - Introducing React Native
Learn once write anywhere - slide
