[React] JSX (JavaScript XML)

복습

https://shins99.tistory.com/61

[React] React 란?

---

JSX(JavaScript XML) 란?

- 자바스크립트를 확장한 문법

- React에서는 UI를 어떻게 표현해야 하는지를 설명하기 위해 React와 함께 사용할 것을 권장

장점 :

- JSX를 사용하면 자바스크립트 코드 내에서도 HTML 코드처럼 UI를 바로 표현 가능

- UI 관련 작업을 할 때 좀 더 직관적이고 용이한 개발이 가능

 

JSX 코드 예시

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
    </div>
  );
}

 

단점 :

- JSX는 표준 자바스크립트 문법이 아님

- 웹 브라우저는 JSX 코드를 그대로 이해하지 못함

- JSX 코드는 웹 브라우저에서 실행되기 전 Babel과 같은 도구를 사용하여 표준 자바스크립트 문법으로 변환해야 함

 

Babel에 의해 표준 자바스크립트 문법(ES5)으로 변환된 JSX 코드

"use strict";
 
function App() {
  return React.createElement("div", null, React.createElement("h1", null, "Hello World!"));
}

- JSX를 사용하면 위와 같이 복잡하고 중첩된 React.createElement() 호출 코드를 여러 번 작성할 필요 없음

( UI 개발이 매우 편리, 작성된 코드의 가독성 증가)

 

모듈(Module)

- 애플리케이션의 기능이 많아질수록 작성해야 하는 코드의 양은 많아지고 복잡성 증가

- 모든 코드를 하나의 소스 파일에 작성하게 되면 코드의 가독성이 저하, 유지보수 어려움

- 기능에 따라 관련 데이터, 함수들을 별도의 모듈(module) 로 나누어 관리하는 것이 일반적

      ( 모듈화 프로그래밍 이라고 함)

- 모듈을 만들어 사용함으로써 기능에 따른 코드들을 체계적으로 관리할 수 있게 되며, 유지보수 쉬워짐

 

export 키워드

- 현재 모듈을 다른 모듈에서 접근할 수 있도록 해주는 키워드

import 키워드

- 내보내진 다른 모듈을 불러와 사용할 수 있도록 해주는 키워드

 

 

모듈 번들러(Module Bundler)

모듈 번들러(module bundler)

- 네트워크 자원 낭비 문제점을 해결하기 위해 웹 앱을 구성하는 수십, 수백 개의 리소스를 하나의 결과물로 만들어서 전송하는 방법 사용, 이 과정에서 사용되는 도구

모듈 번들러 동작 원리

 

장점

- 많은 수의 모듈을 하나로 병합하는 과정에는 변수와 함수 이름의 중복 문제부터 모듈 간의 의존성 문제까지 수많은 문제가 발생할 수 있으며, 이러한 문제들을 해결하는데 상당한 자원과 시간 소모

- 모듈 번들러는 이러한 모든 문제들을 짧은 시간 안에 해결해 줌

   (웹 앱이 최상의 성능을 낼 수 있도록 도와줌)

- 모듈 번들러 사용시 소스 코드를 모듈 별로 작성해도 성능 상의 문제 발생하지 않음

- 모듈이나 라이브러리 간의 의존성 문제도 손쉽게 관리

- 모듈 번들러는 자바스크립트 파일 뿐만 아니라 이미지나 스타일시트 파일, 폰트 파일 등을 모두 하나의 모듈로 인식하고 이를 조합해서 병합함으로써 압축된 하나의 결과물(bundle)로 만들어줌

- 최적화를 위해 하나의 파일을 여러 개의 파일로 분리하는 경우도 생김

 

대표적인 모듈 번들러

- Browserify, Rollup, Parcel, Webpack 등

- 이들의 동작 방식은 도구마다 각각 다름

- React에서는 편의성과 확장성이 좋은 Webpack을 주로 사용