Svelte를 사용해야 하는 3가지 이유

Svelte는 JavaScript 프레임워크 전쟁의 새로운 경쟁자입니다. React 및 Vue와 같은 다른 프레임워크만큼 성숙하지 않을 수 있지만 Svelte를 사용해야 하는 세 가지 이유는 다음과 같습니다.

학습 곡선이 매우 작음

줄 수가 적고 상태 관리가 쉽습니다.

일반 프레임워크가 아닙니다.

1 . 학습 곡선이 매우 작음

HTML, CSS 및 Javascript를 알고 있다면 Svelte를 배우는 것이 쉬울 것입니다. Vue와 마찬가지로 Svelte 템플릿은 HTML의 상위 집합입니다.

간단한 날씬한 예 :


언뜻 보면 모든 것이 HTML처럼 보이지만 Svelte입니다. {}는 일반적으로 HTML에 자바스크립트를 삽입하는 데 사용됩니다.

Svelte is HTML ,CSS ,Javascript with many cool add-ons.

HTML, CSS, Javascript만 알고 있다면 Svelte를 사용해 보세요. 나중에 다른 프레임워크로 전환하는 것도 쉬울 것입니다.

2 . 적은 양의 라인이 필요하고 상태 관리가 쉽습니다.

React & Svelte를 사용한 간단한 카운터의 예를 들어 보겠습니다.


반응:

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

  tick() {
    this.setState(state => ({
      seconds: state.seconds + 1
    }));
  }
  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <div>
        Seconds: {this.state.seconds}
      </div>
    );
  }
}

ReactDOM.render(
  <Timer />,
  document.getElementById('timer-example')
);

호리호리한 :

<script>
  let seconds = 0;
  setInterval(() => seconds += 1, 1000);
</script>

Seconds: {seconds}

React: 33 lines ,
Svelte: 6 lines

위에서 본 바와 같이 :

Svelte는 몇 줄의 코드로 더 큰 일을 합니다.

Svelte의 상태 관리는 정말 간단합니다.

삼 . 정상적인 프레임이 아닙니다..

Svelte는 다른 프레임워크와 상당히 다릅니다. Svelte는 코드를 바닐라 자바스크립트로 컴파일합니다. 따라서 Svelte 앱의 빌드 크기는 작습니다. Svelte는 속도와 개발자 경험으로 인해 명성을 얻을 자격이 있습니다.

결론 :

Svelte에는 Vue와 같은 대규모 커뮤니티가 없으며 Angular 및 React와 같은 주요 회사의 지원을 받지 않습니다. Svelte는 지속적으로 성장하고 있지만 여전히 시장에서 꽤 젊고 새롭습니다. 구직 활동보다는 개인 프로젝트에 사용할 것을 제안했습니다.

자원

반드시 확인해야 할 몇 가지 멋진 리소스입니다.

Official Svelte Site

Introduction to Svelte

How Svelte is truely Reactive

Svelte vs React vs Angular vs Vue