[react-to-print] 특정 컴포넌트 프린트하기

 

 

버튼 클릭 시, 원하는 컴포넌트를 프린트하는 기능을 넣고 싶었다.

역시나 라이브러리가 존재하는군!

 

 

 

 

 

1. 라이브러리를 설치한다.

https://www.npmjs.com/package/react-to-print

react-to-print

npm i react-to-print

 

 

 

 

 

2. useReactToPrint 훅을 가져온다.

import { useReactToPrint } from 'react-to-print';

 

 

 

 

 

3. 프린트하길 원하는 컴포넌트에 ref를 달아준다.

const componentRef = useRef(null);

<PatientListContainer ref={componentRef}>
   ...
</PatientListContainer>

 

 

 

 

 

4. 버튼에 이벤트를 등록하면 끗!

const handlePrint = useReactToPrint({
    content: () => componentRef.current,
});

...

<span role="button" onClick={handlePrint}>

 

 

 

 

결과 화면