1줄 요약: React 개발에는 Node.js와 관련 툴들이 필요합니다.
(아주 불가능하진 않지만요 😇😇😇)
1. 사실 React는 jQuery랑 더 닮았답니다.
React: A JavaScript library for building user interfaces
jQuery: It makes things like HTML document traversal and (...) much simpler with an easy-to-use API
Node.js: is a JavaScript runtime built on Chrome's V8 JavaScript engine.
그쵸? Node.js는 자바스크립트 런타임일 뿐, 결코 UI 혹은 HTML을 표현하지는 않습니다.
React는 가상 DOM을 통해 UI를 만드는 라이브러리이고,
jQuery는 다 아시죠? ^^
그래서 이 둘이 더 닮았다고 할 수 있겠습니다.
“아니 암튼! 그래서 Node.js와 React의 관계는요!”
2. Node.js와 React 사이에는 webpack과 Babel이 있습니다.
webpack: is a static module bundler for modern JavaScript applications.
Babel: is a toolchain that is used to convert ES6+ code into a backwards compatible version of JavaScript.
이것이 무슨 말인고 하니..
React를 통한 대규모 SPA 개발을 위해서는
-
몹시 많은 정적 파일이 필요하고, (.js, .css, .png 등) 이를 번들링할 필요가 있습니다.
→ webpack을 사용합니다. -
ES6를 해석할 수 없는 IE11 등 비非 모던 웹 브라우저에 대한 지원이 필요합니다.
→ Babel을 사용합니다.
고로 React와 Node.js의 관계는.. 쫌 건너건너라고 할 수 있죠!
3. 그럼 Node.js는 무엇인가요?
Node.js는 자바스크립트 런타임 입니다. 그리고 어떤 라이브러리를 갖고 있습니다.
웹브라우저에서 JavaScript가 해석되면, Web API를 통해서 웹브라우저에서 결과가 나타납니다.
Node.js에서 JavaScript가 해석되면, libuv를 통해서 OS에서 결과가 나타납니다.
그래서 Node.js를 통해 webpack과 Babel을 사용하면
(이 과정을 보통 빌드한다고 하죠)
React 코드가 compatible version of JavaScript로 바뀌고, 다시 bundle되어
브라우저에 올리기만 하면 되는 결과물이 나타납니다.
4. npm과 create-react-app
그리고 사실 이게 제일 중요할지도 모르겠는데요..;;
React의 의존성 관리는 npm을 사용하는게 가장 일반적 입니다.
따라서 npm을 쓰려면 역시 Node.js가 필요하게 됩니다!
그리고 React의 부트스트랩인 create-react-app을 사용하기 위해서!
역시 Node.js가 필요합니다.
여기까지 읽으셨다면
React 공식 홈페이지의 새로운 React 앱 만들기도 읽어보세요~
