배열.length : 배열의 아이템 개수 렌더링 하기

상황

원본 배열 데이터가 있고, 이것이 몇 건인지 렌더링하여 사용자가 직관적으로 데이터의 개수를 파악할 수 있도록 하여 사용자 경험을 높이고자 한다.

방법

<Button variant="secondary" onClick={() => setIsAsc(!isAsc)}>
  {isAsc ? '최신순' : '과거순'}
</Button>
<ItemCount>{sortedData.length} 건</ItemCount>

원본데이터배열.length 메서드로 아이템의 개수를 알 수 있다.