[React] 리액트를 사용하는 이유 & 리액트 확장자

리액트 사용 이유

1. 가장 인기 있는 라이브러리

• 주간 다운로드가 3천만 이상으로, 인기 있다.

  npm: react

  

• npm trends에서도 확인 가능

  react vs vue, npm trends

  

[참고] 라이브러리 vs 프레임워크

• 라이브러리: 내가 필요한 것들을 가져와서 사용 → 자유도가 높음
• 프레임워크: 많은 기능들이 내장되어, 있는 것을 바로 사용 → 자유도는 낮음

2. 강력한 커뮤니티

• 국내외로 인기가 많은 프레임워크이기 때문에 매우 큰 커뮤니티를 보유하고 있으며,
  이에 따라 풍부한 교육 자료, 튜토리얼, 예제코드, 라이브러리가 존재.

3. 광범위한 생태계

• 다양한 서드파티 라이브러리와 도구를 지원.
• 예를 들어, 상태 관리를 위한 리덕스, MobX,
  스타일링을 위한 Styled-Components, CSS Modules,
  라우팅을 위한 React Router 등이 있다.

4. DOM

• Document Object Model을 의미.
• 웹 브라우저에 표시되는 모든 UI 구성 요소는 웹 브라우저 내부적으로 객체 형태로 관리.

• 이를 이용해서 자바스크립트는 웹 브라우저 구성 요소에 접근 가능.

  

• 일반적인 DOM은 구성 요소 중 일부를 변경하면, 그 일부와 연결된 모든 DOM을 업데이트 한다는 동작
• 그래서 DOM 트리가 깊으면 깊을 수록, DOM 구성 요소의 변경에 대한 작업 비용 증가.

5. Virtual DOM

• 이러한 기존 DOM을 대비하기 위해서 리액트는 가상 돔이라는 새로운 개념 등장.
• 가상 돔은 기존의 DOM을 그대로 복사해서 리액트 내부 메모리에 저장.
• 리액트에서 어떤 코드의 변경 사항이 발생하게 되면,
  이렇게 복사한 DOM을 사용해서 변경 사항을 처리.

• 실제 DOM과 비교하여 변경된 부분만 업데이트
  → DOM 구성 요소의 변경에 대한 작업 비용이 낮고 효율적.

  

6. 강력한 컴포넌트 기능

• 웹의 구성 요소를 작은 단위로 분할, 재사용 할 수 있도록 독립적인 코드로 작성 = 컴포넌트
• 이러한 컴포넌트를 활용하면 반복적인 웹의 구성 요소를 효과적으로 다루기 가능.

---

바벨

바벨의 유래

• 바벨(babel)이라는 이름의 유래는 과거 ‘바벨탑’에서 유래.
• Frontend의 바벨: 서로 다른 언어 규약으로 작성된 파일을
  웹 브라우저가 이해할 수 있는 형태의 파일로 변환해주는 역할을 하는 개발 툴

바벨의 탄생 배경

• 자바스크립트는 2009년 ES5가 출시된 이후 6년이나 큰 변화가 없었음.
• 그러다가, 2015년에 자바스크립트 생태계를 뒤흔들 ES6(2015)의 등장.
• 그러나, 웹 브라우저가 ES6의 자바스크립트 기능을 지원을 하지 않은 경우가 다반사.

원래 이름은 6to5

• 바벨의 원래 이름은 6to5였음.
• ES6를 지원하지 않는 브라우저도 ES6로 작성된 코드를 6to5를 사용하면 문제 해결.
• 해당 툴의 등장으로 개발자들은 더 이상 브라우저의 호환성을 걱정하면서, ES6를 사용하지 못했던 시기를 극복.
• 훗날 6to5는 바벨(Babel)이라는 이름으로 재탄생.

바벨 (트랜스 컴파일러 도구)

• 리액트에서도 당연히 바벨을 사용.
• 바벨이 리액트의 독자 코드 포맷인 JSX로 작성된 코드를 JS로 일괄적으로 변환.
• 바벨이 있기 때문에 리액트에서 JSX를 사용할 수 있는 것이라는 것을 인지.

---

웹 팩

웹 팩 (번들러 도구)

• 웹 팩은 모듈 번들러
• 여러 개의 자바스크립트 모듈을 하나의 파일로 묶어주는 역할을 함.

• 이때, 실제 코드에서 사용하는 것만 자동으로 추림.
  → 빌드 속도, 성능에 많은 영향

  

⇒ Create-React-App은 바벨과 웹 팩을 사용함.

---

리액트의 빌드 도구

Vite

• 웹 팩이 1세대라면, Vite는 2세대 빌드 도구.
• 웹 팩보다 더 빠른 속도이 장점.
• 리액트와 궁합도 좋아서, 최근에 가장 많이 사용하는 빌드 도구.

그 밖의 빌드 도구

• 바벨의 역할을 하는 도구들 → esbuild, swc 등..
• 웹 팩의 역할을 하는 도구들 → rollup
• 웹 팩을 사용해서 모듈 번들링을 잡아주고, ES6로 작성된 코드를 바벨로 변환.
• 어떤 환경에서든 문제 없이 동작하는 일관된 코드를 작성 가능.

ESBuild

• 개발 모드에서 node_modules 폴더의 패키지들의 종속성을 사전 번들링하기 위해 사용
• 트랜스 컴파일러 + 사전 종속성 번들링
• Go Language(컴퓨터 레벨에 가장 근접한 언어) 기반 → 속도가 빠름.
• but, 개발 모드 수준에서 사용 가능한 번들링.

RollUp

• 배포 시, 라이브러리나 모듈들을 번들링하기 위해 사용
• 트리쉐이킹, 청크 최적화 → 배포에서도 번들링 가능.

SWC - Speed Web Compiler

• 타입스크립트나 JSX를 자바스크립트로 빠르게 트랜스 컴파일하기 위해 사용.
• Rust Language(컴퓨터 레벨에 가장 근접한 언어) 기반 → 속도가 빠름.

---

리액트의 모듈 형식

CommonJS (CJS)

• Node.js에서 기본적으로 사용하는 모듈 시스템

• 작성 방식

    // 내보내기
    module.exports = function add(a, b) { return a + b; }
      
    // 가져오기
    const add = require('./add');
  

• 특징
  • 동기 방식으로 작동 (위에서 아래로 순차적으로 실행)
  • 브라우저에서 직접 사용 X → 웹 팩과 같은 번들러를 사용하여 변환해야 함.

---

UMD (Universal Module Definition)

• 보편적인(Universal) 모듈 형식 → Node.js, AMD, 브라우저 환경 등 여러 환경에서 사용 가능.

• 작성 방식

    (function (root, factory) {
      if (typeof module === 'object' && module.exports) {
        // CommonJS
        module.exports = factory();
      } else if (typeof define === 'function' && define.amd) {
        // AMD
        define([], factory);
      } else {
        // 브라우저 글로벌
        root.myLibrary = factory();
      }
    }(this, function () {
      return {
        hello: function() { console.log("Hello!"); }
      };
    }));
  

• 특징
  • 다양한 실행 환경에서 사용할 수 있는 유연한 구조.
  • 보통 라이브러리를 배포할 때 많이 사용.

---

ESM (ECMAScript Modules)

• 최신 JavaScript 표준 모듈 시스템 → 현재는 브라우저와 Node.js 모두에서 기본적으로 지원.

• 작성 방식

    // 내보내기
    export function add(a, b) { return a + b; }
      
    // 가져오기
    import { add } from './add.js';
  

• 특징
  • 비동기 로딩이 가능.
  • 트리 쉐이킹(tree-shaking) 기능 → 사용되지 않는 코드를 제거 가능.
  • 브라우저에서는 <script type="module">을 통해 직접 사용 가능.

---

변환이 필요한 이유

• 브라우저는 기본적으로 ESM만 인식!
• 따라서, CommonJS나 UMD 형식으로 제공되는 라이브러리를 사용하려면?
  → ESM 형식으로 변환(트랜스파일) 과정 필요.
• 일반적으로 웹 팩, Rollup 같은 번들러 도구들이 처리.

---

리액트에서 사용하는 확장자

.js

• 가장 일반적인 자바스크립트 파일 형식.
• 보통 create-react-app 패키지로 생성한 리액트 프로젝트는
  js 파일을 기본으로 사용.

• react-scripts 패키지: 리액트에서 바벨과 같은 역할을 하는 도구,
  Create React App(CRA)에서의 사용할 수 있는 스크립트 모음,
  웹팩, 바벨과 같은 스크립트가 포함.

  {
    ...
    "dependencies": {
      ...
      "react-scripts": "5.0.1",
      ...
    }
    ...
  }
  

---

.jsx

• JSX = Javascript + XML
• Javascript로 HTML 마크업을 편하게 작성하기 위해 페이스북 팀이 개발한 새로운 언어 형식
• 리액트는 기본으로 JSX 문법을 사용 → 그래서, 확장자를 .jsx로 사용
• @vitejs/plugin-react(-swc) 패키지: vite 프로젝트의 리액트에서
  웹 팩과 바벨의 역할을 함.

  {
    ...
    "devDependencies": {
      ...
      "@vitejs/plugin-react": "4.3.4",
      ...
    }
    ...
  }
  

---

.tsx

• TSX = TypeScript + XML
• .jsx의 타입스크립트 버전을 의미하는 확장자.

---

사용해야할 확장자

• .js(.ts)나 .jsx(tsx)는 확장자에서 큰 차이 없음.
• but, JSX 문법을 확장자가 .js(.ts)에 끝나는 파일에 작성 → 논란 야기.
• vite에서는 공식적으로 jsx(tsx) 형식의 파일을 권장.
  → 되도록 .jsx(tsx)로 해주는 게 좋다.