Vue 3 실전: 무한 스크롤

const{createApp,ref,onMounted,onUnmounted}=Vue;
createApp({
  setup(){
    const items=ref(Array.from({length:10},(_,i)=>({id:i+1,model:'T-'+String(800+i),threat:Math.floor(Math.random()*10)+1})));
    const loading=ref(false);const sentinel=ref(null);let observer;
    const loadMore=()=>{
      loading.value=true;
      setTimeout(()=>{
        const start=items.value.length;
        items.value.push(...Array.from({length:5},(_,i)=>({id:start+i+1,model:'T-'+String(800+start+i),threat:Math.floor(Math.random()*10)+1})));
        loading.value=false;
      },500);
    };
    onMounted(()=>{
      observer=new IntersectionObserver(entries=>{if(entries[0].isIntersecting&&!loading.value)loadMore();},{threshold:0.1});
      if(sentinel.value)observer.observe(sentinel.value);
    });
    onUnmounted(()=>observer?.disconnect());
    return{items,loading,sentinel};
  },
  template:`<div style='max-height:200px;overflow-y:auto;'>
    <div v-for='u in items' :key='u.id' style='display:flex;justify-content:space-between;padding:6px;border-bottom:1px solid #111;font-size:11px;'>
      <span style='color:#f59e0b;'>{{u.model}}</span>
      <span :style='{color:u.threat>=9?"#10b981":u.threat>=7?"#f59e0b":"#22c55e"}'>{{u.threat}}</span>
    </div>
    <div ref='sentinel' style='padding:8px;text-align:center;font-size:10px;color:#555;'>
      {{loading?"LOADING...":"↓ SCROLL"}}
    </div>
  </div>`
}).mount('#inf-out');