인스타 피드처럼 이미지나 카드가 불규칙한 높이로 정렬되는 Masonry Layout을 구현할 때
리액트에서 자주 사용하는 두 라이브러리:
두 가지 모두 유사한 결과를 만들어주지만, 작동 방식과 사용성은 꽤 다르다.
핵심 비교표
| 항목 | react-masonry-css | react-responsive-masonry |
|---|---|---|
| 레이아웃 방식 | display: flex + 컬럼별로 DOM 생성 | column-count 기반 (CSS columns) |
| 브레이크포인트 설정 | breakpointCols 객체로 명시 | columnsCountBreakPoints로 정의 |
| 구조 제어 | 컬럼 className 설정 등 자유도 높음 | 구조는 단순하지만 커스터마이징은 제한적 |
| 성능 | 많은 카드에서도 안정적 | DOM 수가 많아질 경우 레이아웃 흔들림 가능 |
| 설치 용량 | 약 5KB | 약 2KB |
| SSR 대응 | ✅ 안전함 | ✅ 안전함 |
| 사용 난이도 | ⭐⭐⭐ (구조 커스터마이징이 필요) | ⭐⭐ (빠르게 붙이고 끝내기 좋음) |
데모 비교 (요약)
-
react-masonry-css:
DOM 구조는div.my-masonry-grid_column > [카드]형태로 직접 컬럼 나눔
→ 디자인이 복잡할수록 유리함 -
react-responsive-masonry:
브라우저의column-count속성을 활용해 카드가 위→아래→오른쪽으로 채워짐
→ 간단한 갤러리나 이미지 피드에 적합
상황별 추천
| 상황 | 추천 라이브러리 |
|---|---|
| 갤러리, 이미지 중심 피드 | react-responsive-masonry ✅ |
| 카드에 버튼, 텍스트 등 복잡한 구조 | react-masonry-css ✅ |
| 정밀한 마진/간격 조절 필요 | react-masonry-css |
| 빠르게 반응형 레이아웃 완성하고 싶을 때 | react-responsive-masonry |
개인적인 결론
두 라이브러리 모두 훌륭하지만,
- 간단한 이미지 중심 페이지에는
react-responsive-masonry가 더 빠르고 간단하고,- 정교한 UI 컨트롤이 필요한 레이아웃은
react-masonry-css가 더 적합하다.
실제로 나는 Pixabay 클론 프로젝트에서 이미지만 보여주는 페이지에는
→ react-responsive-masonry를 선택했다.
→ 코드도 훨씬 짧고, 레이아웃도 자연스럽게 잡힌다.
기록하자