React로 페이지네이션 구현

const { useState } = React;
  const ALL = Array.from({length:20}, (_,i) => ({id:i+1, name:`UNIT-${String(i+1).padStart(3,'0')}`, threat: Math.floor(Math.random()*5)+6}));
  const PER_PAGE = 5;

  function Pagination() {
    const [page, setPage] = useState(1);
    const total = Math.ceil(ALL.length / PER_PAGE);
    const data = ALL.slice((page-1)*PER_PAGE, page*PER_PAGE);
    return (
      <div>
        {data.map(u => <div key={u.id} style={{color:'#888', fontSize:'12px', marginBottom:'4px', padding:'4px 0', borderBottom:'1px solid #1a1a1a'}}>[{u.name}] 위협도: {u.threat}</div>)}
        <div style={{display:'flex', gap:'4px', marginTop:'12px', alignItems:'center'}}>
          <button onClick={() => setPage(p => Math.max(1,p-1))} disabled={page===1} style={{background:'#333', color:page===1?'#333':'#e8e8e8', border:'none', padding:'4px 8px', cursor:'pointer', fontFamily:'monospace', fontSize:'10px'}}>PREV</button>
          {Array.from({length:total},(_,i)=>i+1).map(p => <button key={p} onClick={()=>setPage(p)} style={{background:p===page?'#10b981':'#1a1a1a', color:p===page?'#080808':'#888', border:'none', padding:'4px 8px', cursor:'pointer', fontFamily:'monospace', fontSize:'10px'}}>{p}</button>)}
          <button onClick={() => setPage(p => Math.min(total,p+1))} disabled={page===total} style={{background:'#333', color:page===total?'#333':'#e8e8e8', border:'none', padding:'4px 8px', cursor:'pointer', fontFamily:'monospace', fontSize:'10px'}}>NEXT</button>
        </div>
      </div>
    );
  }

  ReactDOM.createRoot(document.getElementById('root')).render(<Pagination />);