React 입문 - React, JSX, Babel, 그리고 Webpack 이해하기

React 란?

 

Facebook에서 만든 Javascript Library이다.

UI Components 들을 만드는 도구이며 메모리에  가상 돔을 만든다.

그렇다면 이 가상돔 ( VIRTUAL DOM ) 은 무엇인가?

 

VIRTUAL DOM은 DOM의 추상화이며 복사본인데 아주 가벼운 복사본이다.

React의 경우는 브라우저의 돔을 직접 조작하기 보단 가상돔을 조작을 함으로써 실제 돔이 바뀌는 방법을 택한다.

 

그렇다면 그냥 돔을 바로 조작하면 되는데 굳이 번거롭게 VIRTUAL DOM을 쓰는 이유는 뭘까?

더 빠르고 효율적이기 때문이다.기존 DOM의 경우에는 호환성이 떨어져서 바닐라 자바스크립트로만 조작이 가능하다는 단점도 존재한다.

 

JSX란?

 

이 React는 이 "가상돔"을 조작해서 html을 렌더링해야 하는데

자바스크립트로만 html을 렌더링 하기에 불편함이 많이 따랐다.

 

이때 리액트에서 HTML 문법을 쓸 수 있는 획기적인 기술이 나왔는데

이를 Javascript XML, JSX라고 부른다.

JSX는 많은 개발자들에게 편리함을 제공했는데 아래는 JSX를 쓰지 않았을 때와 썼을 때의 차이이다.

 

JSX를 쓰지 않았을 때

const myElement = React.createElement('h1', {}, 'I do not use JSX!');

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

 

JSX를 썼을 때

const myElement = <h1>I Love JSX!</h1>;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(myElement);

 

이처럼 간단한 로직에도 가독성 차이가 심하다 보니 대부분의 리액트 개발자들은 JSX 를 쓴다.

 

BABEL 이란?

 

JSX는 엄청난 장점에도 불구하고 사실 자바스크립트가 아니기 때문에 돔이, 브라우저가 인식할 수가 없다.

이러한 문제를 해결하기 위해 BABEL 이라는 Transpiler를 사용한다.

 

BABEL 은 호환을 위해 태어났다.

바벨을 사용하면 환경에 맞춰 코드를 자동으로 변환해주기 때문에

더 이상 ES6 문법을 지원하지 않는 브라우저에서도 원활하게 돌아가며

JSX또한 브라우저가 읽을 수 있는 자바스크립트 문법으로 변환된다.

 

WEBPACK 이란?

webpack은 여러 개의 모듈을 하나의 javascript 파일로 묶어주는 모듈 번들러이다. 

 

실무에서 이 webpack이 중요한 이유는 컴포넌트가 많아도 너무 많기 때문이다.비즈니스에서는 당연하게도 다양한 목적과 용도에 맞게 기능들을 여러 컴포넌트로 분리할 것이다.그리고 이 컴포넌트들은 적게는 수십개, 많게는 수만개에 이를텐데 이렇게 많은 컴포넌트들을 결국에는 어디선가 하나로 묶어놔야 그 하나를 참조해서 사용할 수 있을 것이다.

 

사실 webpack 없이 하나의 파일에 다 담거나 분리했어도 한 파일에서 각 컴포넌트가 담긴 파일들을 경로에 맞게 불러오면 된다.

 

그러나, 하나의 파일에 다 담으면 유지보수가 거의 불가능해질 것이고파일들을 경로에 맞게 불러온다는 것도 결국 브라우저 호환성 문제나 엄청난 중복코드를 유발 할 수 있다.

 

그래서 컴포넌트들을 분리하면서도 자동으로 여러 파일들을 하나로 묶어주고불필요한 크기를 최대한 줄여주면서? 주석까지 자동으로 제거 할 수 있는 만능 번들러 webpack이 등장한 것이다.