React 개발에 왜 Node.js가 필요할까??

구글에 React를 검색하면 항상 Node.js가 붙어다니는 광경을 목격할 수 있습니다.

React를 공부하면서 개발하기도 시간이 촉박한데 Node.js까지 공부를 해야하는지 의문이 많이 들 것입니다.

도대체 React랑 Node.js랑 무슨 관계가 있는 것일까요??

 

결론부터 말하자면, React를 사용하기 위해 Node.js가 반드시 필요한 것은 아닙니다.

 

그럼에도 왜 항상 React 뒤에는 Node.js가 따라 붙는 것일까요?

그 이유는 Node.js가 React를 사용하기 더 쉽게 해주는 도구들을 내장하고 있는 오픈소스이자 JavaScript runtime environment이기 때문입니다.

 

더 자세하게 설명하자면 Node.js는 설치하는 경우 NPM(Node Package Manager)이 같이 설치되는데 이 NPM이란 것을 통해 React 개발에 필요한 다양한 모듈들을 다운받아 사용할 수 있습니다.

 

다운로드는 npm cli를 이용해 간단한 명령어를 입력하면 npmjs.com 사이트의 npm registry에 접근하여 이루어집니다.

 

cli를 통한 명령어 입력 방법 예시

$ npm install

 

그렇기 때문에 React개발자들은 다른 개발자들이 구현해 놓은 간편하고 필요한 모듈 및 라이브러리들을 다운받기 위해서 node.js를 설치해서 사용하는 것입니다.

 

그렇다면 npm만 설치하면 되지 왜 굳이 번거롭게 node.js를 통해 npm을 설치하는 것일까요??

물론, react는 클라이언트 기반 라이브러리기 때문에 npm만 설치하여도 react와 react-dom라이브러리를 사용할 수 있습니다.

 

그러나 node.js가 있으면 바벨이라는 컴파일러 도구를 추가로 다운받아 자바스크립트 대신 JSX를 사용하는 것이 가능하기 때문입니다. 그렇다면 JSX가 무엇인가??

 

JSX는 JavaScript를 확장한 문법입니다. 맛보기로 잠깐 다루자면

class Hello extends React.Component {
  render() {
    return <div>Hello world</div>;
  }
}

class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Hello world`);
  }
}

위의 코드가 JSX로 작성된 코드이고 아래 코드가 자바스크립트 코드로 작성된 코드입니다.

언뜻 봤을때도 JSX로 작성된 코드가 좀 더 생산성 측면에서 좋아보이고 유지보수도 쉬워보입니다.

(우리에게 익숙한 html코드로 개발할 수 있기 때문에 코딩이 쉬워진다!)

이러한 이유들 때문에 JSX를 사용하는 것입니다.

 

또한, 바벨은 자바스크립트 es6 문법을 es5로 변환하는 기능을 갖고 있습니다. 따라서 우리는 바벨을 통해 React를 다양한 브라우저 환경에서 실행시키는 것이 가능해집니다.

 

참고자료

TITLE	URL
JSX 없이 사용하는 REACT	ko.reactjs.org/docs/react-without-jsx.html#gatsby-focus-wrapper