medium-zoom 적용하기

평소 Medium에서 개발 포스팅을 찾아보는 편인데, 글에서 이미지를 클릭했을 때, 줌이 되는 기능이 이뻐보여서 내 개발 블로그에도 적용하고 싶어 비슷한 라이브러리들이 있나 찾아보게 되었다.

우선 이 블로그가 React로 개발했으니 React에서 사용할 수 있는 라이브러리를 찾아보니 react-medium-image-zoom이 있었다. 하지만 React로 작성해야 하기 때문에, 마크다운이 HTML로 번역된 상태에서는 사용이 불가능해 보인다.

이와는 다르게 querySelector로 <img>요소들을 파라미터로 전달하기만 하면 사용할 수 있는 medium-zoom 라이브러리가 있었다.

medium-zoom에 대한 사용 방법은 github에 잘 나와있고 playground로 데모를 확인할 수 있다.

medium-zoom 사용 방법

// CSS selector
mediumZoom('[data-zoomable]');

// HTMLElement
mediumZoom(document.querySelector('#cover'));

// NodeList
mediumZoom(document.querySelectorAll('[data-zoomable]'));

// Array
const images = [
  document.querySelector('#cover'),
  ...document.querySelectorAll('[data-zoomable]'),
];

mediumZoom(images);

추가적인 옵션이 있는데 medium-zoom github에서 확인하자.

React에서 사용할 때는 다음 처럼 사용하면 된다.

React에서 medium-zoom 사용 방법

import React from 'react';
import mediumZoom from 'medium-zoom';

class MediumZoomExample extends React.Component {
    componentDidMount() {
        const images = document.querySelectorAll('.example-container img');
        mediumZoom(images);
    }

    render() {
        return (
            <div className="example-container">
                <img src="/test.png" />
                <img src="/test2.png" />
            </div>
        );
    }
}

블로그에 적용된 결과.