React-PDF와 React-PDF-Viewer 비교

프로젝트를 진행하며 사용자가 등록한 PDF 파일을 웹에서 보여주도록 하는 기능을 구현하기 위해 PDF 뷰어를 사용해야 될 일이 생겼다.

열심히 찍먹한 과정을 기록하고자 한다!

1. React-pdf

PDF 파일을 로드하고 렌더링 하는데 최적화 된 라이브러리
❗️ 간단한 PDF 뷰잉 기능을 구현할 때 적합

장점

• 참고할만한 레퍼런스가 많음
• 굉장히 꾸준한 업데이트 (거의 주에 한번 꼴로 업데이트 하는 듯..)
• 커스터마이징 가능

단점

• 기본적인 PDF Viewer UI가 없어서 직접 구현해야 함
• 기본 UI 컴포넌트와 기능들 (예: 페이지 이동 버튼, 줌 컨트롤 등)은 제공하지 않음

2. React-pdf-viewer

PDF 파일을 보기 위한 뷰어 라이브러리
❗️ 별도의 추가 구현 없이 빠르게 PDF 뷰터를 제공할 때 적합

장점

• 아주아주 친절한 공식문서
  ( 커스텀 하는 방법, 적용 방법, 다양한 기능 제공을 친절히 알려줌 )
• 커스터마이징이 다양
• 제공하는 UI가 많음
• 사용 방법이 간단

단점

• React-PDF에 비해 라이브러리가 무거움
• React-PDF에 비해 적은 레퍼런스

3. 적용하는 방법

React-pdf

1. react-pdf 설치

npm install @react-pdf/renderer --save
yarn add @react-pdf/renderer

2. pdfjs 설정 및 코드 작성

import { useState } from "react";
import { Document, Page } from "react-pdf";
import { pdfjs } from "react-pdf";

pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`;

function PDFPage() {
  const [numPages, setNumPages] = useState<number>();
  const [pageNumber, setPageNumber] = useState<number>(1);

  function onDocumentLoadSuccess({ numPages }: { numPages: number }): void {
    setNumPages(numPages);
  }

  return (
    <div>
      <Document
        file="https://fileUrl.pdf"
        onLoadSuccess={onDocumentLoadSuccess}
      >
        <Page pageNumber={pageNumber} />
      </Document>
    </div>
  );
}
export default PDFPage;

• Document
  PDF 파일을 로드하는 컴포넌트
  file 속성에 PDF 파일의 경로(URL 또는 로컬 파일)를 설정
  onLoadSuccess 속성에 PDF 로드 성공 시 호출될 함수를 지정함

• Page
  PDF 문서의 특정 페이지를 렌더링하는 컴포넌트
  pageNumber 속성에 렌더링할 페이지 번호를 지정함

3. 실행 화면

React-pdf-viewer

1. React PDF Viewer와 필수 패키지를 설치

npm install @react-pdf-viewer/core @react-pdf-viewer/default-layout
yarn add @react-pdf-viewer/core @react-pdf-viewer/default-layout

2. 코드 작성

import { Worker, Viewer } from "@react-pdf-viewer/core";
import { defaultLayoutPlugin } from "@react-pdf-viewer/default-layout";

import "@react-pdf-viewer/core/lib/styles/index.css";
import "@react-pdf-viewer/default-layout/lib/styles/index.css";

function PDFPage() {
  const defaultLayoutPluginInstance = defaultLayoutPlugin();
  return (
    <div>
      <Worker workerUrl="https://unpkg.com/pdfjs-dist@3.4.120/build/pdf.worker.min.js">
        <div
          style={{ border: "1px solid rgba(0, 0, 0, 0.3)", height: "750px" }}
        >
          <Viewer
            fileUrl="https://fileUrl.pdf"
            plugins={[defaultLayoutPluginInstance]}
          />
        </div>
      </Worker>
    </div>
  );
}

export default PDFPage;

• Worker
  PDF.js 워커를 설정하는 컴포넌트
  PDF 파일을 처리하기 위해 별도의 스레드에서 워커 스크립트를 실행함

• workerUrl
  워커 파일의 URL을 지정함
  이 경우 pdfjs-dist 라이브러리의 워커 스크립트를 사용함

• Viewer
  PDF 파일을 표시하는 핵심 컴포넌트
  PDF의 페이지를 렌더링하고, 플러그인을 통해 다양한 기능을 제공함

• fileUrl
  표시할 PDF 파일의 URL

• plugins
  뷰어에 추가할 플러그인을 배열 형태로 전달
  여기서는 defaultLayoutPluginInstance를 사용해 기본 UI를 활성화함

3. 실행 화면

4. 찍먹 후기

어쩌다 보니 React-PDF와 React-PDF-Viewer 두 개의 라이브러리를 다 적용했다.

React-PDF가 비교적 구현하기 쉽고 가벼운 라이브러리니 프로젝트에 적용했었는데, React-PDF에서는 command + F4 같이 단어를 찾는 기능이 지원이 되지 않았다.
진행하는 프로젝트가 이력서와 관련된 프로젝트인 만큼, 핵심 키워드나 필요한 단어를 검색하는 기능이 없으면 많이 아쉬울 것 같아 다양한 뷰어 기능을 제공하는 React-PDF-Viewer로 라이브러리를 변경했다.

두 라이브러리 모두 적용하기 쉽고 다양한 기능을 제공하니, 프로젝트의 요구사항과 상황에 맞게 선택해서 활용되면 좋겠다!