React를 쓰는데 왜 Node.js가 필요하지?

저번에 스터디를 하다가 누가 물어봤는데 제대로 답변을 못했던 질문이다. React를 쓰는데 왜 Node.js를 먼저 설치해야 할까?

Node.js는 웹 서버와 같은 네트워크 프로그램을 만들기 위해 고안된 자바스크립트 런타임이다. Node.js의 개발로 자바스크립트를 웹 브라우저 외의 다양한 환경에서도 사용할 수 있게 되었다.

React는 웹 UI를 구성하기 위한 프론트엔드 자바스크립트 라이브러리이다. 자바스크립트는 웹 사이트를 동적으로 사용할 수 있도록 하기 위해 개발된 언어라서 기본적으로 웹 브라우저에 내장된 자바스크립트 엔진에 의해 동작한다. React는 웹 상에서 동작하기 때문에 웹 브라우저 환경에서 작동하면 된다.

React는 사용할 HTML 파일에 아래와 같은 <script> 태그를 추가해서 실행시킬 수 있다.

  <!-- React를 실행. -->
  <!-- 주의: 사이트를 배포할 때는 "development.js"를 "production.min.js"로 대체하세요. -->
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

  <!-- 만든 React 컴포넌트를 실행. -->
  <script src="like_button.js"></script>

React를 적용하고 싶은 DOM을 가져와서 render 함수를 실행시키면 그 DOM에 React 컴포넌트를 추가할 수 있다.

const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}

코드 출처

React의 강점 중 하나는 JSX이다. JSX는 React로 UI 코드를 편하게 짤 수 있게 해준다. JSX는 HTML 마크업과 비슷한 문법을 사용해서 훨씬 보기 편하다. HTML 마크업 안에서 자바스크립트 표현식을 쓸 수 있는 형태다. 위 코드의 return 문은 아래와 같이 수정할 수 있다.

return (<button onClick={() => this.setState({liked: true})}>
	Like
</button>)

그런데 JSX는 순수 자바스크립트 문법이 아니기 때문에 웹 브라우저가 이해할 수 없다. 웹 브라우저가 이해할 수 있게 하기 위해선 JSX 코드를 React.createElement와 같은 함수로 변환해 줘야 한다.

Babel을 사용해 코드를 변환할 수 있다. <script> 태그를 사용해서 HTML에 바벨을 실행시키는 코드를 집어 넣으면 된다. 그러나 프로덕션을 위한 프로젝트나 아주 복잡한 프로젝트일 경우에는 이런 방법이 적합하지 않다.

이런 이유로 React에 Node.js가 필요해진다. Babel은 자바스크립트 컴파일러이고, npm을 통해 설치할 수 있다.

npm은 Node Package Manager로(약어는 아니라고 함), Node.js에서 사용 가능한 모듈을 패키지화해 모아두었다. npm이 제공하는 CLI를 통해 편하게 자바스크립트 패키지를 설치할 수 있다. npm은 package.json이라는 JSON 파일을 사용해 프로젝트의 정보와 의존성을 관리하는데, 이 파일을 통해 팀 내에서 의존성 환경을 통일하고 개발 환경을 빠르게 구축할 수 있다. package.json 파일 내에 프로젝트 내에서 자주 사용하는 커맨드를 작성해 두고 npm CLI를 통해 쉽게 실행시킬 수도 있다.

Babel을 설치했다면, npm exec 커맨드로 바벨을 실행시켜 React 코드를 트랜스파일링할 수 있다.

npm exec babel --watch src --out-dir . --presets react-app/prod

(튜토리얼 원문에서는 npx를 사용했는데, 공식 문서를 보니 npx는 deprecated 된 것 같다.)

Babel 외에도 코드를 번들링하기 위해 Webpack을 사용하거나 SCSS 등의 CSS 전처리기를 사용하려면 npm이 필요하다.

정리하자면 React와 같은 웹 UI 라이브러리를 사용하는 데 Node.js가 필수인 것은 아니다. 별도의 설치 없이도 충분히 개발은 할 수 있다. 그러나 프로젝트가 커지고 복잡해지다 보면 순수 React만으로는 부족해지는 순간이 온다. 프로젝트의 성능 때문일 수도 있고, 개발자 경험을 위해서일 수도 있다.

필요한 라이브러리가 브라우저 상에서 동작하는 것이 아니라 CLI로 실행시켜야 할 수도 있다. 그럴때 Node.js가 필요해진다. npm을 통해 패키지를 설치하고 실행할 수 있다.