React 시작하기 with Node.js

📌 1. React란

React는 자바스크립트 라이브러리의 하나로서 사용자 사용자 정의 태그를 만드는 기술이다.

그렇다면 React를 왜 사용할까?

html과 css, javascript를 이용해서 웹 페이지를 충분히 만들 수 있지만

React는 사용자 인터페이스를 구축하고 관리하기 위한 JavaScript 라이브러리로서

웹 애플리케이션을 보다 효율적으로 개발할 수 있게 해주는 도구이기 때문에 사용한다.

🚩 React 특징

1. 컴포넌트 기반 아키텍처

React는 UI를 독립적인 컴포넌트로 분리하여 개발하는 방식을 지원한다. 따라서 코드를 모듈화하고 재사용 가능한 컴포넌트를 생성하여 개발 속도를 높일 수 있다.

2. 가상 DOM

React는 가상 DOM을 사용하여 실제 DOM과의 변경 사항을 비교하고 최소한의 DOM 조작만을 수행하여 성능을 향상시키고, 이는 웹 페이지의 렌더링 효율성을 높여준다.

3. 단방향 데이터 흐름

React는 데이터 흐름을 단방향으로 유지하는 방식이다.
이로 인해 상태 변화를 추적하기 쉽다.

4. 재사용 가능한 UI 구축

React 컴포넌트는 독립적이며 재사용 가능하므로, 유사한 UI 요소를 여러 곳에서 사용할 수 있는 장점이 있다.

📌 2. Node.js

구글에 React를 검색하면 항상 Node.js가 붙어다니는 광경을 자주 볼 수 있다.

그러면 왜 항상 이 둘은 붙어 다닐까?

그 이유는 Node.js는 설치하는 경우 NPM(Node Package Manager)이 같이 설치되는데 이 NPM이란 것을 통해 React 개발에 필요한 다양한 모듈들을 다운받아 사용할 수 있기 때문이다.

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

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

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

그렇다면 JSX가 무엇인가?

바로 JSX는 JavaScript를 확장한 문법이다.

아래의 있는 코드를 보자.

📖 JSX로 작성된 코드

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

📖 JavaScript로 작성된 코드

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

두 개의 코드를 비교해보면 JSX로 작성된 코드가 좀 더 간결하고 유지보수도 쉬워보인다.

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