React에서 단일 페이지 애플리케이션의 프린트 기능 구현하기

React SPA(Single Page Application)에서 특정 컴포넌트나 화면 내용을 프린트하는 기능은 사용자 경험을 높이는 데 매우 중요합니다. 이번 글에서는 React 환경에서 손쉽게 프린트 기능을 구현하는 방법을 실무적으로 설명하겠습니다.

1. 기본 window.print() 사용하기

가장 간단한 방법은 브라우저의 기본 window.print() 메서드를 호출하는 것입니다. 하지만 이 경우 페이지 전체가 인쇄되기 때문에 특정 영역만 출력하기 어렵습니다.

const handlePrint = () => {
  window.print();
};

2. react-to-print 라이브러리 활용하기

특정 컴포넌트만 인쇄하려면 react-to-print 라이브러리를 사용하는 것이 편리합니다. 설치는 다음과 같습니다.

npm install react-to-print

아래는 라이브러리를 이용한 프린트 예제입니다.

import React, { useRef } from 'react';
import ReactToPrint from 'react-to-print';

const ComponentToPrint = React.forwardRef((props, ref) => (
  

    <h1>인쇄할 내용입니다</h1>
    <p>여기에 필요한 정보를 작성하세요.</p>
  </div>
));

function PrintExample() {
  const componentRef = useRef();

  return (
    <div>
      <ReactToPrint
        trigger={() => <button>출력하기</button>}
        content={() => componentRef.current}
      />
      <ComponentToPrint ref={componentRef} />
    </div>
  );
}

export default PrintExample;

3. CSS로 인쇄 스타일 정리하기

프린트된 페이지의 가독성을 높이려면 인쇄 전용 CSS를 작성해야 합니다. 보통 @media print를 사용하며, 배경색 제거, 페이지 나누기 등을 설정합니다.

@media print {
  body {
    background: white;
    color: black;
  }
  .no-print {
    display: none;
  }
}

4. 요약

React SPA에서 프린트 기능은 기본 window.print()부터 react-to-print 라이브러리 활용까지 다양한 방법이 있습니다. 실무에서는 특정 컴포넌트만 인쇄 가능하도록 포커싱하는 것이 중요하며, CSS를 통해 인쇄 최적화도 반드시 적용해야 합니다.

지금 바로 프로젝트에 적용해보시고, 사용자 편의성을 높여보세요!