6-internal-process

.vue

컴포넌트를 생성하는 대표적인 방법중에 하나가

vue 라는 확장자로 컴포넌트를 만드는 방법입니다. (SFC)

vue 파일에는 보통 순서대로 템플릿, 스크립트, 스타일이 들어가는데,

이것을 vue-loader라는 친구가 처리해줍니다.

vue-loader

vue-loader는 npm의 의존성을 관리하는 package.json의 dev dependency에서 찾아볼 수 있습니다.

dev dependency이므로 컴파일단계에서 *.vue를 vue-loader가 해석해줍니다.

그래서 브라우저에서 해석할 수 없는 vue확장자가 자연스럽게 실행되는것처럼 느껴지죠.

virtual dom (가상돔)

또 하나의 중요한 개념이 등장했습니다.

바로 SFC에서 템플릿에 해당하는 부분인, virtual dom입니다.

템플릿내부를 보면, 마치 태그와 생김새가 같습니다.

하지만 내부적으로는 createElement와 같은 vue라이브러리의 메소드가

템플릿을 파싱하여 자바스크립트 객체로 변형시킵니다.

react에서는 render function 내에 작성한 jsx문법이 있다면, createElement와 같거나 비슷한 메소드로

js object로 변경하는 작업이 존재합니다. render function은 아래에서 더 자세히 소개합니다.

dom을 직접 변경하는 것은 비용이 많이 들어가는 작업입니다.

모던 웹에서는 실시간으로 dom이 자꾸자꾸 변경되고,

받아오는 데이터도 계속해서 변합니다.

그런 무거운 작업을 최소화시키고자 하는것이 virtual dom입니다.

데이터변경이 있으면, dom을 바로 변경하지않고 내부적으로 바뀐 부분만

계산하여, 그 부분만 변경하게 됩니다.

예를 들어, 외부 데이터로 [1,2,3] 이라는 데이터를 받았고

템플릿에서

<div>1</div>
<div>2</div>
<div>3</div>

이런식으로 렌더링한다고 가정합니다.

그런데 [1,2,3,4]로 데이터가 갱신됐습니다. 화면을 다시 렌더링해야합니다.

<div>1</div>
<div>2</div>
<div>3</div>

위에서 아래처럼 변경될것입니다.

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>

직접 변경과, virtual dom은 여기서 차이가 발생합니다.

직접 dom을 조작하는 로직이라면 (차이점을 계산하는 라이브러리 혹은 알고리즘이 없다고 했을때)

해당하는 기존 템플릿을 제거하고, 새로운 템플릿을 렌더링하여 특정 위치에 삽입할것입니다.

그런데 요즘 프론트라이브러리, 프레임워크는 기존 dom에 4만 추가하는 방법을 사용합니다.

여기에 이제 더 복잡한 템플릿이나 로직이 추가된다면, virtual dom이 훨씬 유리할것입니다.

react에도 virtual dom개념이 존재하지만, vue와는 조금 다른 알고리즘을 사용하여서

같은 virtual dom이지만 속도차이가 존재합니다.

angular.js (v1)은 dom을 직접 조작하여서 속도가 상대적으로 느립니다.

하지만 위에서 예제로 설명한 간단한 list렌더링의 경우에는 key라는 속성을 이용하여,

list에서 어느부분이 변경됐는지 감지하고, 계산하여 바뀐부분만 변경합니다.

render function

위에서 virtual dom을 js object로 변경할때, createElement라는 숨어있는 메소드를 이용한다고 말씀드렸습니다.

화면에 컴포넌트를 렌더링할때는 render라는 메소드를 사용합니다.

life cycle을 확인해보시면, 프레임워크마다 차이는 있겠지만

컴포넌트가 마운트되기전에 render function을 실행합니다.

여기서 잠깐 life cycle method에 대해 설명합니다.
life cycle method 는 말 그대로
컴포넌트의 생명주기입니다.
특정 타이밍이 되면, 자동으로 실행하는 메소드입니다. (프레임워크에서 호출합니다.)
우리가 직접 호출하지않죠.
그리고 심지어 컴포넌트가 사라질때도 컨트롤할수있습니다. (unmount || destroy)

그리고 컴포넌트가 업데이트되어도 실행합니다.

react에서는 render function을 구현하지만, vue에서는 그렇지않습니다.

템플릿부분에 작성하면, vue-loader가 자동으로 생성해주죠.