데이터를 하나하나 직접 입력할 수는 없으므로 createBulkTodos라는 함수를 만들어서 데이터 2,500개를 자동으로 생성했습니다.

여기서 주의할 점은 useState의 기본값에 함수를 넣어 주었다는 것입니다. 여기서 useState (createBulkTodos())라고 작성하면 리렌더링될 때마다 createBulkTodos 함수가 호출되지만, useState(createBulkTodos)처럼 파라미터를 함수 형태로 넣어 주면 컴포넌트가 처음 렌더링될 때만 createBulkTodos 함수가 실행될 것입니다.

자, 이제 코드를 저장하면 다음과 같이 데이터 2,500개가 나타날 것입니다.

▲ 그림 11-2 많은 데이터 렌더링하기

 

데이터 2,500개가 렌더링되었다면 항목 중 하나를 체크해 보세요. 이전보다 느려진 것이 느껴지나요?