Masonry 레이아웃 구현하기 ( + react-responsive-masonry 라이브러리 )

벽돌을 쌓아올린 형태의 레이아웃인 Masonry 레이아웃 작업하기 

이번에 팀원들과 함께 작업한 "제주도의 나만의 스팟을 촬영하여 공유하는 사이트" 인 Picspot의 메인페이지이다.

최대한 많은 양의 사진들을 한눈에 보일 수 있게 하기 위해 Masonry 레이아웃 디자인을 채택했다.

 

이전 작업에서도 비슷한 작업을 한 적이 있다. 

이 작업을 진행할 땐 

.container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(1, 1fr);
            grid-gap: 10px;
            grid-template-areas:
          'a b c'
          'a d d'
          'e e e'
          'f f f'
          'g g g'
          'h h h'
          'i i i';
            align-items: center;
 }

grid-template-columns를 이용하기도 하고, column속성을 사용하여 구현을 했다.

하지만 이건 한계가 있었다.

Picspot 프로젝트는 무한스크롤을 사용하고 있는데 이런식으로 column 속성을 사용할 시에 데이터들을 업로드 할때마다 게시물의 순서가 재배치 되는 단점이 있었다.

그래서 column-width문제를 해결하고, 반응형에 대응할 수 있는 react-responsive-masonry 라이브러리를 사용하였다.

        <ResponsiveMasonry
          columnsCountBreakPoints={{ 425: 1, 750: 2, 1200: 3 }}
        >
          <Masonry columnsCount={3}>
            {myCollectionTownArr?.map((item: string) => (
              <CollectionCategory
                key={uuidv4()}
                value={item}
                collectorList={collectorList}
              />
            ))}
          </Masonry>
        </ResponsiveMasonry>

이런식으로 <ResponsiveMasonry>테그를 부모테그로 두며 속성값을 설정하고 안에 <Masonry>테그를 자식테그로 작성하였다.

여기서 columnsCount를 설정하여 보다 간단한 방식으로 프로젝트를 진행할 수 있었다.