[TIL]Day 29. 핀터레스트 레이아웃을 구현해보자!

오늘은 지금 진행하고 있는 프로젝트에서 구현해보았던 핀터레스트 레이아웃에 대한 포스팅을 진행해보도록 하겠습니다.

 

요로한 느낌적인 느낌이랄까? 출처:https://www.pinterest.co.kr/

masonry layout

 

위와 같은 핀터레스트의 레이아웃을 masonry 레이아웃이라고 합니다. masonry 라는 뜻은 석공직, 석조 건축이라는 뜻을 가지고 있다고 합니다. 마치 벽돌을 쌓아 올리는 것 같은 모습이죠? 이런 모습을 구현하는 방법은 여러가지가 있습니다. 라이브러리를 사용하는 방법도 있고, 생활코딩에는 기초적인 css를 활용해서 구현하는 강좌도 있습니다. 하지만 오늘 제가 사용하려는 방법은 지난 시간에 설명드린 grid css와 자바스크립트 함수를 통해서 구현하는 방법입니다.

 

함수를 만들어보자

 

우선 이 방법을 사용하기 위해선 무한 스크롤 기능 구현 당시 이야기했던 client height 값이 필요합니다. 이 값을 얻기 위해 ref 를 사용하려고 합니다.

 

출처: https://ko.reactjs.org/docs/refs-and-the-dom.html

 리액트에서의 ref는 위에 설명된 것과 같이 render 메서드에서 생성된 DOM 등에 접근하는 방법입니다. 이러한 DOM 에 접근 해야만 우리가 필요한 client height 값을 가져올 수 있습니다. 

 

 

ref를 생성하는 방법은 리액트의 constructor에 this.ref이름 = React.createRef(); 를 입력하는 것입니다. 이렇게 ref를 생성하고 해당 값을 아래 사진처럼 우리가 가지고 오고 싶은 태그의 ref 값으로 참조를 걸어주시면 됩니다. 

 

 

그리고 아래와 같은 방식을 통해 요소의 DOM 객체에 접근한 다음 우리에게 필요했던 값인 clinet height 를 가지고 오면 됩니다. 

 

이렇게 얻은 client height 값을 적당한 수치로 나눈 후, 이를 위에 설정했던 state 값을 바꾸는 용도로 사용해줍니다. componentDidMount 되었을 때 나타나는 화면이 이 메소드가 실행된 후의 값을 바탕으로 구성될 것이기 때문에 이 함수를 componentDidMount에서 실행시키도록 합니다. 

 

마지막으로 우리가 바꾸고 싶은 높이의 값에 inline-style로 해당 값을 입력해준다면 우리가 만들고자 했던 masonry 스타일의 레이아웃이 완성됩니다. 

 

마무리

 

보기엔 간단해 보이는 이 함수를 구현하기 위해 저는 4일이나 삽질을 했어야 했습니다. ㅠㅠ

부디 이 글을 보시는 여러분은 시행착오를 조금이나마 덜 하시길 바라며 이번 포스팅 마무리 하도록 하겠습니다.