[React] 특정 컴포넌트 프린트 하기

JavaScript에서 프린트를 할 때 사용하는 함수는 window.print()이다. 그러나 이 함수의 문제는 현재 보고 있는 페이지 전체를 프린트한다는 것이다. 만약 특정 컴포넌트만 프린트 하고 싶을 땐 어떻게 할까? react-to-print npm 모듈을 사용하면 쉽게 할 수 있다. 간단하게 사용법을 알아보자.

react-to-print

아주 간단한 컴포넌트를 생성하고 프린트까지 해보는 예시를 다루어 보자. 우선 react-to-print 모듈을 설치해주자.

명령어 : npm install react-to-print / yarn add react-to-print

설치했다면 아래 2개의 컴포넌트를 생성해주자. SimpleComponent는 프린트 될 컴포넌트이고, App 컴포넌트를 프린트 명령할 컴포넌트이다.

const SimpleComponent = props => {
  const { printRef } = props;

  return <div ref={printRef}>아주 간단한 컴포넌트입니다.</div>;
};

const App = () => {
  const componentRef = useRef(null);

  return (
    <div>
      <ReactToPrint
        trigger={() => <button>프린트하기</button>}
        content={() => componentRef.current}
      />

      <SimpleComponent printRef={componentRef} />
    </div>
  );
};

결과 이미지

우리가 원하는대로 SimpleComponent만 잘 프린트 되는 것을 확인할 수 있다. 코드를 간단하게 설명하자면, trigger는 프린트 명령할 컴포넌트를 넘겨주면 되고, content에는 프린트 될 컴포넌트를 ref에 연결시켜 넘겨주면 된다. 위와 같이만 해도 우리가 원하는 결과를 얻을 수 있다. 그러나 만약 화면에 보이는 SimpleComponent를 감추고 싶다면 어떻게 할까? 정답을 빠르게 확인해보자.

const SimpleComponent = props => {
  const { printRef } = props;
  return (
    <div style={{ display: "none" }}>
      <div ref={printRef}>아주 간단한 컴포넌트입니다.</div>
    </div>
  );
};​

프린트하고자 하는 컴포넌트를 div로 감싼 후 display:"none" css를 주면 간단하게 해결된다. 위 결과 이미지를 보면 아주 간단한 컴포넌트입니다. 라는 프린트할 내용이 보이지 않는 것을 확인할 수 있다. 더 자세한 내용은 react-to-print npm 사이트에서 확인하고 적용해보자. 이동하기

마지막

해당 내용은 틀릴 수도 있다는 것을 감안하여 봐주세요. 틀린 내용 및 오탈자 수정 요청 환영입니다.