스벨트가,,,좋아?

스벨트가… 리엑트보다 좋다는 넘들이 있는데

맞습니다 ㅎㅎ..

Angular, React, Vue가 나온지 벌써 10년이 넘어가는데

Language	Angular	React	Vue
Initial release	2010	2013	2014

무슨 기술이던 오래쓰면 단점이 부각됨
그중 리액트의 최대 단점은 코드가 매우매우 더럽다는것

let [modal, setModal] = useState(false); // state 선언

<button
  onClick={() => {
    let copy = [...data];
    copy[0] = "new data";
    setTitle(copy); // state 변경 함수 사용법
  }}
>
  button
</button>;

• state 변수 만들려면 매우매우 귀찮음
• state 변경 방식도 좀 더러움
• 고질적인 성능 이슈가 있음

function App(params) {
  let [a, setA] = useState(0);
  let [b, setB] = useState(false);
  console.log(b);

  return (
    <div className="App">
      <div className="black-nav">
        <h4>ReactBlog</h4>
      </div>
    </div>
  );
}

// state 변경 시 위의 App component를 전부 다시 읽음
// virtural DOM 같은걸 이용해서 HTML의 다른점만 찾아서 바꿈

• 핵심 기능이 재 랜더링이기 때문
• state가 변하면 html이 재 랜더링 되기 때문
• 그냥 변경시 거기 있는 내용을 (html)을 다시 읽음
• html은 다른점만 찾아서 바꿈
  • html이 길면 다른점 찾는 과정도 매우 오래걸림

그럼 스벨트는 머가 좋냐고?

• 일단 문법이 짱짱쉬움(적은 코드량)
• VDOM 그런거 없는데 아무튼 짱짱빠름

VDOM이 없다고?

Virtual DOM이란, 브라우저에서 웹 페이지를 출력할 때 많은 비용이 소모되는 DOM 조작을 속도가 빠른 메모리 안에서 미리 구현한 후 실제 페이지에 적용하기 위해 도입된 방식으로 앞서 언급한 3 대장 프레임워크 모두가 성능 향상을 위해 사용하는 개념
브라우저는 웹 페이지를 출력할 때 아래와 같이 복잡한 과정을 거치는데, 간단히 설명하면 HTML 문서로 DOM Tree를 생성하고, CSS로 Style 규칙을 정의한 후 이 두 개를 합쳐 Render Tree를 생성함 (이 과정을 Attachment라고 함)
> >

브라우저는 생성된 Render Tree를 기반으로 Layout (또는 Reflow) 과정을 거치는데, 이 단계가 바로 브라우저에서 가장 많은 시간과 자원을 사용하는 단계임
따라서 웹 페이지의 반응성 및 성능을 향상하기 위해서는 Layout 과정을 최소화하는 것이 좋음
문제는 DOM을 조금만이라도 조작하더라도 위의 과정을 끊임없이 반복한다는 것임
10번의 DOM 조작이 일어난다면, 브라우저는 10번의 Layout 과정을 수행하는 것
따라서 성능 향상을 위해서는 Layout 과정을 최소화하는 것이 필수이며, 이 과정에서 Virtual DOM이 사용됨
DOM이 변경되면 바로 브라우저에 반영하는 것이 아니라 메모리 상에 있는 Virtual DOM에서 여러 번의 DOM 수정을 거친 뒤 최종으로 완성된 DOM을 브라우저에 반영하는 것임
따라서, 브라우저는 단 한 번의 Layout만으로 최종 결과물을 출력할 수 있음

하지만 Svelte는 Virtual DOM을 사용하지 않음
Svelte는 Virtual DOM이 실제 DOM보다 대부분은 빠르지만, 100% 빠르다고 확신할 수 없다고 주장중
Virtual DOM이 실제 DOM에 적용되는 과정을 살펴보면, 변경되기 전 Virtual DOM과 변경된 Virtual DOM을 서로 비교하여 변경된 부분만 실제 DOM에 적용하는 방식으로 이루어지기 때문

문제는 Virtual DOM끼리 비교하는 과정에서 오버 헤드가 발생함
실제로 ReactJS의 컴포넌트에는 오버 헤드를 줄이기 위해 “shouldComponentUpdate”라는 메서드를 제공하고 이 메서드는 전달받은 state 또는 props 값에 따라 Re-render를 진행할지에 대한 여부를 알려주는 메서드이며, 상황에 따라 비교 과정을 줄여 오버 헤드를 줄임
즉, ReactJS는 Virtual DOM의 비교 과정에 대한 오버 헤드를 이미 신경 쓰고 있다는 것

Virtual DOM을 사용하면 위와 같이 필연적으로 오버 헤드가 발생하기 때문에 Svelte에서는 Virtual DOM을 사용하지 않음
Svelte는 인터프리터와 같이 런타임에서 변경된 요소를 찾느라 시간을 허비하지 않고, 컴파일러와 같이 빌드 시 실제 변경된 요소가 어디에 어떻게 변경됐는지 정확하게 찾아내는 최적화된 작업을 수행함

그렇다고 하는데 내부구조는 따로 설명이 없음 이런;;

이 표를 보면 HTML 변경 작업이 react가 6배나 느림

사실 react가 그리 빠른 언어는 아니긴 함

장점을 더 말해보자

번들의 크기가 매우 작아짐

필연적으로 DOM 변경에 사용되는 오버해드가 존재하지 않고, 런타임을 포함하지 않아서 DOM변경에 관한 작업(Diff등) 또한 필요가 없음

진정한 반응성

Svelte에서 주장하는 반응성이란 Virtual DOM을 사용하여 변경된 요소를 하나하나 비교하고 찾아내어 반영하는 것이 아닌, 빌드 시간에 정확하게 어디가 어떻게 변경될지 알고 반영하는 것이라고 말함
빌드 타임에 이러한 작업을 수행하기 때문에 Svelte는 자신이 컴파일러라고 주장함

Svelte는 내부적으로 Store를 기본으로 제공함으로써, 변경된 상태 값을 DOM에 빠르게 반영할 수 있도록 기능을 제공함 (VueJS와 매우 비슷)

Vue가 짱짱이라니까

단점들

너무 많은것을 허용하는 코드스타일

IE11이하에서 지원하지 않음(근데 다른 프레임워크도 마찬가지)

(중요!) 정보가 정말 정말 없다

Svelte에 관련된 정보는 구글에서 찾아보면 많이 나오긴 하지만 ReactJS나 VueJS, Angular 대비 매우 적은 수준
아무래도 알려진 게 얼마 전이다 보니 커뮤니티 자체가 매우 작음
그나마 요즘 심심치 않게 올라오는 것 같음