프론트 프레임워크를 왜 쓸까? (React, Vue 쓰는 이유)

이 글은 자바스크립트를 조금 알고, 프론트 프레임워크를 시작한 지 얼마 되지 않은 초보, 입문 개발자의 입장에서 작성되었습니다.

0. 프레임워크가 할 수 있는 일은 모두 바닐라 JS로 할 수 있다

먼저 분명히 해 두고 싶은 점입니다. React나 Vue로 할 수 있는 일은 모두 바닐라 JS(순수 자바스크립트)로 구현할 수 있습니다.

그럼에도 사람들이 프레임워크를 쓰는 이유가 무엇일까요?

 

1. 데이터의 변화를 화면에 적용하기 쉽다

프레임워크(React)를 개발한 페이스북 페이지를 예시로 들어, 바닐라 JS와 프레임워크의 차이점을 알아보겠습니다.

페이스북 메인화면입니다. 이 화면에서 저의 이름(눈치볼나이)이 들어가는 곳을 파란 네모로 표시해두었습니다.

제가 만약 이름을 바꾼다면, 화면에서 저 세 부분이 바뀌어야 할 것입니다. 먼저 바닐라 JS로 코드를 작성해보겠습니다.

바닐라 JS로 만들 때

const nameElements = document.querySelectorAll('.username');
let newName = '눈치없는나이';
nameElements.forEach((nameElement)=>{
  nameElement.innerText = newName;
});
// 만약에 newName이 바뀐다면 nameElements의 이름은 변할까요?
newName = '눈치있을나이';

바닐라 JS에서 데이터가 변해서 DOM을 업데이트하려면 위 코드와 같은 두 절차의 작업이 필요합니다.

 

1. 바꾸려는 데이터가 쓰인 DOM Element를 가져와서
2. 변경 내용을 적용

당연히 제가 마지막 줄에 적은 것처럼 데이터를 변경시키는 것 만으로는 DOM이 업데이트 되지 않습니다. 데이터가 변하면 또 위 두 가지의 작업을 해줘야하는 것이죠.

여기서 웹 페이지의 규모가 커지면 커질 수록 몇 가지 문제가 발생합니다.

 

1. 어느 데이터가 어느 DOM Element에 적용되었는지 기억해야 합니다.
2. 데이터의 업데이트가 많이 일어날 수록, 중복적으로 작성하는 코드(dom을 선택하고, 업데이트하는)의 양도 많아집니다.

이런 문제를 프론트 프레임워크에서는 어떻게 해결했는지 아마 이미 알고 계실 것입니다.

프론트 프레임워크를 쓸 때

React에서는 state를, Vue에서는 data를 변경하기만 하면, DOM은 알아서 업데이트 됩니다. 내가 이 데이터가 어디에 쓰였는지 모두 알지 못해도 상관없습니다. 프론트 프레임워크가 알아서 그 데이터가 적용된 모든 DOM을 업데이트할 것입니다.

리액트 홈페이지에는 이런 문구가 작성되어 있습니다.

React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줍니다. 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하세요. 그럼 React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링합니다.

2. 컴포넌트화 하기 쉽다

커다란 웹 사이트는 당연히 작게 쪼개어 개발하는 것이 훨씬 수월합니다. 디자인이나 기능을 토대로 큰 웹 사이트를 작은 부품으로 분리해 놓은 것을 보통 컴포넌트라고 부릅니다. 컴포넌트를 만들고, 적용하는 것이 각각의 경우 어떻게 다른지 알아보겠습니다.

바닐라 JS를 쓸 때

<div>
  <img src="#" alt="카드 썸네일">
  <div>
    <h3>카드 타이틀</h3>
    <p>카드 설명</p>
  </div>
</div얖>

이렇게 생긴 카드를 반복해서 사용하기 위해 JS로 만들어 보겠습니다.

const card = document.createElement('div');
const cardThumbnail = document.createElement('img');
const cardBody = document.createElement('div');
const cardBodyHeader = document.createElement('h3');
const cardBodyDescription = document.createElement('p');
card.appendChild(cardThumbnail);
card.appendchild(cardBody);
...생략

단지 DOM element를 만드는 코드일 뿐인데 뭐가 이렇게 긴걸까요. 저도 결국 다 적지 못하고 생략하였습니다. 만들 땐 어떻게 만들었다고 하더라도, 나중에 저 코드를 다시 본다면 어떤 엘리먼트를 만든건지 감을 잡는 것도 어려울 것 같습니다.

프론트 프레임워크를 쓸 때

Vue를 통해 카드 컴포넌트를 만들어 보겠습니다.

<template>
  <div>
    <img :src="imgUrl" alt="카드 썸네일">
    <div>
      <h3>{{ title }}</h3>
      <p>{{ description }}</p>
    </div>
  </div>  
</template>

<script>
  export default {
    name: 'Card',
    data() {
      return {
        imgUrl: '#',
        title: '카드 타이틀',
        description: '카드 설명',
      };
    },
  }
</script>

 

카드 컴포넌트가 어떻게 생겼는지 한눈에 들어올 뿐만 아니라, 간단한 코드로 데이터 바인딩까지 모두 완료한 상태입니다.

결론

크게 두 가지로 프론트 프레임워크를 사용하는 이유를 작성해보았습니다.

1. 데이터의 갱신이 간편하다.
2. 컴포넌트 단위 개발을 하기 편리하다.

이 두 가지 장점은 개발하는 규모가 커지고, 관리하는 데이터가 많으면 많을 수록 느끼기 좋습니다. 다르게 말하면, 작은 웹 페이지의 경우 프론트 프레임워크가 개발에 필요 없을 수 있다는 말도 되겠죠. 프론트 프레임워크를 무조건 사용하기 보다는, 적절히 필요에 따라 사용하실 줄 알게 되시길 바랍니다.