멋쟁이 사자처럼 프론트엔드 심화과정 4기 - Day 2

멋쟁이사자처럼 (출처 : 나무위키)

 

1. Vue.js

2일차 수업에는 Vue.js를 이용해 MVC(Model, View, Controller) 패턴의 기본 구조를 경험하는 시간을 가졌다.

기본적인 Vue 코드의 구조는 이렇게 된다.

 

Vue.createApp({
	data: {
    	// 상태 데이터
    },
    methods: {
    	// 기능 구현
    }
}).mount('#calc-app');

 

실습으로 간단한 덧셈 계산기를 만들어 보았는데, 예제를 통해 HTML과 Vue.js를 결합하여 실습을 진행했다.

 

아래는 간단한 예제이다.

/* HTML 코드 */

<section id="app">
		<h1>덧셈 계산기</h1>
		<form>
			<fieldset>
				<legend>계산기 입력폼</legend>
				<div>
					<label>x:</label>
					<input id="x-input" dir="rtl" v-model.number="x" />
					<label>y:</label>
					<input id="y-input" dir="rtl" v-model.number="y" />
					<span>=</span>
					<span class="result" v-text="result">0</span>
				</div>
				<hr />
				<div>
					<input type="submit" class="sumbmit-input" value="계산하기" @click.prevent="submitHandler" />
				</div>
			</fieldset>
		</form>
	</section>

/* Vue의 MVC 코드 */

Vue.createApp({
    data() {
        return {
            x: 20,
            y: 30,
            result: 0,
        }
    },
    methods: {
        submitHandler() {
            this.result = this.x + this.y;
        }
    }
}).mount('#app');

 

HTML 코드가 View의 영역, Vue 코드의 data 부분이 Model, methods 부분이 Controller의 영역이다.

 

HTML에 Vue.js 지시자인 v-model, v-text, @click 등을 사용하여 데이터를 화면에 바인딩 하고, 사용자의 입력을 받아 모델을 변경한다.

• v-model : 입력 필드의 값과 데이터(Model)을 양방향으로 바인딩 한다.
• v-text : 데이터를 텍스트 형태로 화면(View)에 출력한다.
• @click.prevent : 클릭 이벤트를 감지하고, 브라우저의 기본 동작을 막는다. 이 예제에서는 폼 제출시 페이지 새로고침을 방지하기 위해 사용했다.

그리고 Vue.js의 methods 에서 정의한 submitHandler() 함수는 사용자의 입력(x, y)을 받아 데이터를 계산하고, 결과를 Model에 반영해 화면을 업데이트 한다.

 

2. Virtual DOM의 이해와 JSX 소개

Virtual DOM이란, 실제 브라우저 화면에 그려지는 **DOM(Document Object Model)**을 직접 조작하지 않고, 메모리 상에서 JavaScript 객체로 가상의 DOM 트리를 먼저 만든 뒤, 이전 상태와 비교(diff)해서 변화가 필요한 부분만 실제 DOM에 반영하는 방식이다.

 

이 방식을 쓰는 이유는 간단하다.

실제 DOM 조작은 느리고 무겁기 때문에, 화면이 자주 변경되는 SPA(Single Page Application) 환경에서는 효율적으로 관리하는 게 핵심이다.

구분	Vue.js	React.js
템플릿 문법	HTML과 유사한 템플릿 기반	JSX를 이용한 JavaScript 기반
Virtual DOM 생성	템플릿 컴퍄일러가 내부적으로 Virtual DOM 생성	JSX → Babel → React.createElement() → Virtual DOM
렌더링 최적화	정적 노드를 사전분석하여 hosting 처리	diffing 알고리즘을 통해 전체 트리 비교 후 최소 변경 적용
설계 철학	HTML 중심 → 디자이너 / 퍼블리셔 친화적	JavaScript 중심 → 개발자 친화적, 로직 중심

 

React는 "모든 것이 JavaScript" 라는 철학을 기반으로 전체 UI를 자바스크립트로 컨트롤하며, 복잡한 로직을 처리하는 데 강점이 있다.

반면 Vue는 템플릿 기반으로 HTML 친화적이라서 진입장벽이 낮고 빠르게 UI를 만들 수 있다. 그치만 나는 React를 선호한다. 이미 익숙하니까.

 

Vue와 React 모두 Virtual DOM을 사용하지만, 접근 방식에는 차이가 있다.

• Vue.js는 HTML에 가까운 템플릿 문법을 사용한다.
  이 템플릿을 컴파일러가 내부적으로 Virtual DOM으로 변환한 후, 변경 사항을 감지해서 업데이트한다.
  정적인 노드는 미리 분석해서 캐싱(hoisting) 처리함으로써 성능을 향상시킨다.
• React.js는 JSX 문법을 사용한다.
  JSX는 JavaScript 안에서 HTML처럼 보이게 작성할 수 있게 해주며, 이 코드는 Babel을 통해 React.createElement()로 변환된다.
  이 과정에서 React는 diffing 알고리즘을 사용해 새롭게 만들어진 Virtual DOM과 이전 Virtual DOM을 비교한 후, 필요한 부분만 실제 DOM에 반영한다.

요약하자면 둘 다 Virtual DOM을 통해 성능을 최적화하지만, Vue는 템플릿 기반으로 좀 더 직관적이고, React는 JS 기반의 로직 중심 구조라 더 유연하고 강력하다.

 

3. React.js와 Virtual DOM

React.js는 Virtual DOM을 사용하는 대표적인 프론트엔드 라이브러리 중 하나이다.
React의 가장 큰 특징 중 하나는 컴포넌트 기반 구조와 함께, JSX 문법을 사용해 개발자가 마치 HTML을 다루듯 JavaScript로 UI를 만들 수 있다는 점이다.

 

간단하게 “Hello, ReactJS!”를 출력해보는 예제도 실습했다.

<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<div id="root"></div>
<script>
  ReactDOM.render(
    React.createElement('h1', null, 'Hello ReactJS!'),
    document.getElementById('root')
  );
</script>

 

여기서 React.createElement()는 가독성이 떨어지기 때문에 보통 JSX 문법을 사용한다.
JSX는 JavaScript 내부에서 HTML을 작성하는 것처럼 보이게 해주며, Babel 같은 컴파일러가 이 코드를 실제 React.createElement()로 변환해준다.

const element = (
  <h1 className="greeting">Hello, world!</h1>
);
ReactDOM.render(element, document.getElementById('root'));

 

이러한 JSX 문법을 브라우저가 이해하도록 하기 위해 <script type="text/babel">을 사용하는데, 이는 Babel이라는 트랜스파일러를 통해 최신 자바스크립트 문법이나 JSX 문법을 ES5 형태로 변환해주는 역할을 한다.

 

4. JSX와 Babel 그리고 번들링

JSX는 익숙해지면 정말 강력한 문법이라고 한다.

처음엔 JavaScript 안에 HTML을 쓴다는 게 낯설고 문법 오류도 자주 났지만, 실제로 React.createElement()와 비교해보면 가독성과 작성 편의성에서 큰 차이가 있다는 것을 알 수 있었다.

React.createElement('h1', null, 'Hello World');

 

이것 보다는 아래처럼 쓰는게 훨씬 더 직관적인 것 같다.

<h1>Hello World</h1>

 

그렇지만 브라우저는 JSX를 그대로 해석하지 못하기 때문에 Babel 같은 도구가 필요하다.

Babel은 JSX 뿐만 아니라 최신 ES6+ 문법까지 지원해주는 유용한 도구다.

또한, React 프로젝트에서는 일반적으로 코드를 js 파일로 분리하고, 번들링해서 하나의 파일로 묶어 배포하는 방식으로 관리한다.

 

번들링이란?

번들링은 말 그대로 여러 개의 파일(자바스크립트, CSS, 이미지 등)을 하나의 파일 또는 몇 개의 파일로 묶는 작업이다.

우리가 실제로 프로젝트를 개발할 때는 기능별로 수많은 .js 또는 .jsx 파일, .css, .png, .svg 파일들을 분리해서 관리하지만,
브라우저는 이런 파일들을 하나씩 불러오는 데 시간이 걸리고, 성능도 떨어질 수 있다.

 

그래서 Webpack, Vite, Parcel 같은 번들러가 등장한 거다.

이 번들러들은 다음과 같은 일을 해준다:

• 모든 파일을 의존성에 따라 분석하고, 하나의 JavaScript 파일(또는 최소한의 묶음들)로 최적화된 형태로 압축한다.
• 사용하지 않는 코드(Dead Code)는 제거(Tree Shaking)
• 최신 문법은 Babel 같은 트랜스파일러와 함께 ES5로 변환해 구형 브라우저에서도 호환되게 함

5. 두번째 강의를 마무리 하며..

이번 강의를 통해 Vue와 React 두 가지 프레임워크를 비교하며 Virtual DOM의 개념을 더 깊이 있게 이해할 수 있었다.
특히 JSX와 Babel의 개념은 단순히 "써야 한다"는 수준에서 "왜 써야 하는가"로 인식이 전환된 느낌이다.

내가 지금 작성하는 코드가 브라우저에서 어떻게 해석되고, 실제로 어떤 구조로 DOM에 렌더링되는지를 이해하고 나니, 코드 한 줄 한 줄을 적을 때 마다 평소보다는 조금 더 생각하면서 작성하게 되는 것 같다.

 

그렇지만 솔직히 아직은 헷갈리는 것도 많고, JSX 오류에 당황할 때도 많다.

 

그럼에도 불구하고 이 복잡한 구조 속에서 분명히 내 실력이 성장하고 있다는 걸 느낀다.