10. 포스트 보여주기

이제 서버에 있는 데이터들을 화면에 보여줄 차례입니다. 이번에 포스트 목록을 보여줄 때, 우리는 masonry 라는 레이아웃 라이브러리를 사용합니다.

masonry 레이아웃을 사용하면 카드들의 크기가 서로 달라도 일정한 여백으로 정렬을 할 수 있게 되며, 반응형으로 작동을 하여 브라우저 사이즈가 줄어들면 재정렬이 진행됩니다.

우리는, masonry 레이아웃을 리액트 환경에서 더욱 쉽게 사용 할 수 있는 react-masonry-component 를 이용하여 레이아웃을 구성하게 됩니다.

그리고, 포스트를 더 불러올 때에는, 무한스크롤링을 통하여 불러오는데요, 그냥 단순히 스크롤이 바닥에 닿았을 때 데이터를 불러오는게 아니라, 이 과정에서 prefetching 을 적용하여, 사용자가 스크롤 하기 이전에 데이터를 미리 불러오고, 스크롤을 했을 때 사전에 로딩된 데이터를 보여주어 훨씬 더 빨리 정보를 제공하여 사용자로 하여금 더욱 빠르게 느껴지는 경험을 제공합니다.