react-to-print로 A4 출력 레이아웃 만들기 + useRef

회사 프로젝트에서 거래명세표를 A4 가로 방향(landscape)으로 인쇄하는 기능을 구현해야 했습니다.

- 화면에는 왼쪽 영역만 표시
- 인쇄 시에는 A4 한 장을 꽉 채워 좌/우 모두 출력 (하나는 고객용 / 하나는 내부용)
- 인쇄 시 전용 스타일 적용 (폰트 크기, 여백 등 조정)

이를 구현하기 위해 React to Print의 useReactToPrint 훅을 사용하여, 특정 DOM에 대해 인쇄 작업을 진행했습니다.

 

이 글에서는 React to Print 라이브러리를 사용해 특정 컴포넌트를 인쇄하고, 인쇄 시에만 적용되는 스타일을 설정하여 이 문제를 어떻게 해결했는지 공유해 봅니다!

 

왜 window.print()가 아닌 React to Print?

일반적으로 웹에서 인쇄 기능을 구현할 때 window.print()를 사용할 수 있습니다. 하지만 다음과 같은 문제점이 있었습니다.
1. 특정 컴포넌트만 인쇄하기 어려움
window.print()는 브라우저 화면 전체를 인쇄 대상으로 잡습니다. 특정 부분(컴포넌트)만 인쇄하려면 별도의 @media print 처리, display: none 등 복잡한 설정이 필요해집니다.
2. 인쇄 미리보기나 자동 닫기 등 세부 설정 불가
React 컴포넌트 단위로 인쇄 과정을 제어하기가 까다롭습니다. 사용자가 인쇄 대상을 손쉽게 확인하고, 출력 제목 설정 등을 하려면 다른 로직을 더 구현해야 하죠.
3. 다른 라이브러리와의 호환성
인쇄 시점에 DOM을 직접 조작하지 않고, 리액트 컴포넌트 구조에 맞춰 인쇄를 구현하려면 React to Print 훅(useReactToPrint)이 훨씬 간편합니다.

결과적으로 React to Print를 사용하면 특정 컴포넌트를 따로 렌더링하고, 그 영역만 손쉽게 인쇄할 수 있으며, 인쇄 스타일을 커스터마이징하기가 수월해집니다.

 

 

useRef와 React to Print의 동작 원리

• useRef는 React에서 특정 DOM 요소나 값을 재렌더링 없이 참조할 수 있게 해 주는 훅입니다.
• const printRef = useRef<HTMLDivElement | null>(null); 처럼 선언해 두고, <div ref={printRef}>에 연결하면, 컴포넌트가 재렌더링되어도 printRef.current는 변하지 않습니다.
• React to Print의 useReactToPrint 훅은 content 옵션으로 인쇄할 DOM을 반환받습니다. 우리가 content에 printRef.current를 넘기면, 해당 DOM만 별도로 브라우저의 인쇄 기능을 통해 미리보기·인쇄할 수 있게 됩니다. 또한 pageStyle 옵션을 통해 인쇄 시 전용 스타일을 추가로 설정할 수 있습니다.

 

 

A4 가로 방향 인쇄 레이아웃 잡기

인쇄 영역(printRef)에 다음과 같이 두 개의 영역을 배치합니다.
• 왼쪽 영역: 화면에도 보이게 함
• 오른쪽 영역: 화면에서는 숨기고, 인쇄 시에는 표시하도록 설정

 

예시 코드

import React, { useRef } from "react";
import { useReactToPrint } from "react-to-print";

function TransactionStatement() {
const printRef = useRef(null);

const handlePrint = useReactToPrint({
content: () => printRef.current, // 인쇄할 컴포넌트를 반환
documentTitle: "거래명세표",
pageStyle: `
@page {
size: A4 landscape; /* A4 가로로 설정 */
margin: 0;
}

  @media print {
    body {
      margin: 0;
      padding: 0;
    }
    /* 인쇄 시에만 적용할 스타일 오버라이드 */
    .print-area {
      width: 297mm;   /* A4 가로 길이 */
      height: 210mm;  /* A4 세로 길이 */
      display: flex;
      flex-direction: row;
    }
    .half-page {
      width: 50%;
      padding: 10mm;
      box-sizing: border-box;
    }
    .print-border {
      border-left: 1px solid #ccc;
    }

    /* 화면에는 숨겨놨던 영역도 인쇄 시에는 보이도록 */
    .print-only {
      display: block !important;
    }
  }
`,
});

return (


{/* 인쇄 버튼 */}
인쇄
  {/* 인쇄 영역 */}
  <div ref={printRef} className="print-area">
    {/* (1) 화면에도 보이는 영역 (좌측) */}
    <div className="half-page">
      <h2>거래명세표 (화면 & 인쇄)</h2>
      <p>좌측 영역 내용...</p>
    </div>

    {/* (2) 화면에는 보이지 않고, 인쇄 시에만 보이는 영역 (우측) */}
    <div className="hidden half-page print-border print-only">
      <h2>거래명세표 (인쇄 전용 우측)</h2>
      <p>우측 영역 내용...</p>
    </div>
  </div>
</div>
);
}
export default TransactionStatement;

 

1. useReactToPrint
• content 옵션에 인쇄할 DOM(printRef.current)을 지정합니다.
• pageStyle에 인쇄 시 적용할 CSS를 문자열로 넣어줍니다.

2. @page { size: A4 landscape; }
• 가로 방향(A4 Landscape)으로 인쇄되도록 설정합니다.

3. .print-only 클래스
• 화면에서 display: none 처리한 뒤, @media print에서는 display: block !important;로 다시 표시할 수 있습니다.
• 위 예시에서는 Tailwind CSS의 hidden 클래스를 사용하고, 추가로 print-only 클래스를 만들어 인쇄 시 보이도록 강제했습니다.

4. .half-page 레이아웃
• 좌우 각각 50% 너비를 차지하도록 하여 A4 가로 한 장을 반으로 나눈 레이아웃을 구성합니다.
• 가운데 경계선을 위해 .print-border 클래스에 border-left: 1px solid #ccc; 설정을 추가했습니다.

 

인쇄 스타일 오버라이드 @media print

프로젝트에서 화면에 표시되는 UI와 실제 인쇄 시 표시되어야 할 레이아웃이 크게 달라야 할 때가 있습니다.
예를 들어 화면에서는 크게 보이던 폰트를 인쇄 시 작게 축소해야 하는 경우가 그렇죠.

이런 문제를 방지하기 위해, @media print를 사용해 인쇄 시에만 적용되는 별도의 CSS 규칙을 정의할 수 있습니다. 이를 통해 레이아웃, 폰트 크기, 여백, 테이블 너비 등을 화면과 인쇄 용도로 나누어 관리하게 됩니다.

@media print는 CSS 표준의 일부로, 브라우저가 인쇄(프린트) 모드로 전환될 때 자동으로 적용되는 미디어 쿼리입니다. 즉, 특별한 라이브러리나 설정을 추가로 하지 않아도, 브라우저는 인쇄 시점에 @media print 구문 내부의 스타일을 우선 적용합니다.

 

예를 들어, 너무 많은 내용이 한 페이지에 들어갈 때 폰트가 커서 잘리는 경우, 아래와 같이 폰트를 줄여줄 수 있습니다.

@media print {
/* 테이블 폰트 사이즈 축소 예시 */
.custom-table .ant-table-cell,
.custom-table .ant-table-summary > tr {
font-size: 7px !important;
}

/* 페이지 여백 0으로 세팅 */
body {
margin: 0;
padding: 0;
}
}

이러한 인쇄 전용 스타일은 개발자가 직접 화면과 인쇄를 구분하여 설정할 수 있어야, 의도한 레이아웃과 정확히 일치하게 인쇄를 진행할 수 있습니다.

 

정리

1. useReactToPrint + useRef로 특정 DOM을 인쇄 대상으로 지정.
2. 인쇄 전용 스타일은 @media print 내부에서 정의.
3. 화면용/인쇄용을 구분해 필요에 따라 display를 달리 적용.
4. A4 사이즈 가로 방향은 @page { size: A4 landscape; }로 설정.

 

 

개선 사항이 있다면 언제든 댓글로 남겨주세요! 감사합니다.