React, Vue 및 Svelte: 데이터 렌더링 비교

데이터 렌더링...

보시다시피 모든 프레임워크에는 데이터를 순환하는 고유한 방법이 있습니다.
React는 map 방법을 사용하고 Vue는 v-for 방법을 사용하며 Svelte는 {#each}{/each} 방법을 사용하여 완전한 콧수염 구문을 사용합니다.

확인해보세요 🚀

반응하다

Link

import { useState } from "react";
const [jobs, setJobs] = useState([
  {id: 1, title: "Frontend Developer"},
  {id: 2, title: "Backend Developer"},
  {id: 3, title: "Fullstack Developer"}
]);

<ul>
  {
    jobs.map((job) => (
      <li>{job.title}</li>
    ))
  }
</ul>

뷰

Link

import { ref } from "vue";
// `reactive` could be used instead of `ref`
const jobs = ref([
  {id: 1, title: "Frontend Developer"},
  {id: 2, title: "Backend Developer"},
  {id: 3, title: "Fullstack Developer"}
]);

<template>
<ul>
  <li v-for="job in jobs" :key="job.id">
    {{ job.title }}
  </li>
</ul>
</template>

날씬한

Link

const jobs = [
  {id: 1, title: "Frontend Developer"},
  {id: 2, title: "Backend Developer"},
  {id: 3, title: "Fullstack Developer"}
];

<ul>
{#each jobs as {id, title}, i}
  <li id={id}>
    {title}
  </li>
{/each}
</ul>