React에 Nodejs가 필요한 이유

도대체 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를 설치해서 사용하는 것입니다.

 

왜  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로 작성된 코드가 생산성과 유지보수도 쉬워보입니다.

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

 

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

 

참고자료

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

 

출처 : https://chucoding.tistory.com/86