노드 도움말

리코일 NPM (개발자를 위한 작동 방식)

Name: IronPDF
Brand: Iron Software
Availability: InStock
Rating: 4.87 (307 reviews)

업데이트됨:1월 18, 2026

상태 관리는 견고하고 확장 가능한 React 애플리케이션을 구축하는 데 있어 매우 중요한 요소입니다. 다양한 상태 관리 라이브러리 중에서 Recoil은 강력하고 유연한 옵션으로 떠올랐습니다. 페이스북에서 실험적인 상태 관리 프레임워크로 개발한 Recoil은 복잡한 상태 관리 시나리오를 단순화하고 React 애플리케이션에서 전역 상태를 관리하기 위한 보다 직관적인 API를 제공합니다.

이 글에서는 Recoil의 핵심 개념, 장점, 그리고 React 프로젝트에서 Recoil을 사용하는 방법을 살펴봅니다. 또한, 웹사이트 URL이나 HTML에서 PDF를 생성하는 IronPDF Node.js PDF 생성 도구 라이브러리에 대해서도 살펴보겠습니다.

리코일 패키지란 무엇인가요?

Recoil은 Redux 및 Context API와 같은 기존 솔루션의 한계를 해결하기 위해 개발된 React용 상태 관리 라이브러리입니다. 이 라이브러리는 React 애플리케이션에서 공유 상태를 관리하는 보다 간편하고 성능이 뛰어난 방법을 제공하며, 세밀한 업데이트, 비동기 상태 관리, React의 동시성 모드와의 손쉬운 통합과 같은 기능을 제공합니다.

핵심 개념

Recoil은 다른 상태 관리 라이브러리와 차별화되는 몇 가지 핵심 개념을 도입합니다.

원자: 원자는 Recoil의 상태를 나타내는 기본 단위입니다. 이것들은 구성 요소 간에 공유될 수 있는 상태의 일부를 나타냅니다. 아톰의 값이 변경되면 해당 아톰을 구독하는 모든 구성 요소가 자동으로 다시 렌더링됩니다.
선택자: 선택자는 하나 이상의 원자 또는 다른 선택자로부터 상태를 도출하는 순수 함수입니다. 동기식 또는 비동기식으로 작동할 수 있으며, 이를 통해 복잡한 상태 도출 및 데이터 가져오기 로직을 구현할 수 있습니다.
RecoilRoot: 이 구성 요소는 구성 요소 트리에 Recoil 컨텍스트를 제공하는 데 사용됩니다. React의 Context Provider와 유사하며, Recoil 상태를 사용하는 애플리케이션 부분을 감싸야 합니다.

반동의 이점

Recoil은 다른 상태 관리 솔루션에 비해 다음과 같은 몇 가지 장점을 제공합니다.

세밀한 업데이트: Redux에서는 상태 변경 시 여러 컴포넌트가 다시 렌더링될 수 있지만, Recoil은 변경된 상태를 구독하는 컴포넌트만 다시 렌더링되도록 하여 성능을 향상시킵니다.
동시 실행 모드 호환성: Recoil은 React의 동시 실행 모드와 원활하게 연동되도록 설계되어 시간 분할 및 서스펜스 기능과 같은 기능을 통해 더욱 부드러운 사용자 경험을 제공합니다.
간편한 비동기 상태 처리: Recoil은 비동기 선택기를 기본적으로 지원하기 때문에 데이터 가져오기와 같은 비동기 상태 처리가 더 간편합니다.
확장성: Recoil은 모듈식 상태 관리 방식을 통해 대규모 애플리케이션에 대한 확장성이 뛰어납니다.
커뮤니티 노력: Recoil은 MIT 라이선스 하에 자유롭게 사용, 수정 및 배포할 수 있습니다. 이는 개발자들 간의 광범위한 채택과 협업을 장려하여 누구나 자유롭게 이를 기반으로 버그 수정 및 변경 사항 공유를 통해 Recoil을 개선할 수 있도록 합니다. Recoil의 개발은 오픈 소스 GitHub 저장소에서 진행됩니다.

리코일 시작하기

React 애플리케이션에서 Recoil을 사용하려면 다음 단계를 따르세요.

Recoil을 설치하려면 npm을 실행하세요.

최신 안정 버전을 설치하려면 Recoil 패키지가 npm에 있으므로 다음 명령을 실행하세요.

npm install recoil

npm install recoil

SHELL

RecoilRoot 설정하기

RecoilRoot 컴포넌트로 애플리케이션을 감싸세요.

import React from 'react';
import ReactDOM from 'react-dom/client';
import { RecoilRoot } from 'recoil';
import App from './App';

const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);

root.render(
  <RecoilRoot>
    <App />
  </RecoilRoot>
);

import React from 'react';
import ReactDOM from 'react-dom/client';
import { RecoilRoot } from 'recoil';
import App from './App';

const rootElement = document.getElementById('root');
const root = ReactDOM.createRoot(rootElement);

root.render(
  <RecoilRoot>
    <App />
  </RecoilRoot>
);

JAVASCRIPT

원자와 선택자를 정의합니다.

import { atom, selector } from 'recoil';

// Atom to hold the text state
export const textState = atom({
  key: 'textState',
  default: '',
});

// Selector to derive the character count from the textState atom
export const charCountState = selector({
  key: 'charCountState',
  get: ({ get }) => {
    const text = get(textState);
    return text.length;
  },
});

import { atom, selector } from 'recoil';

// Atom to hold the text state
export const textState = atom({
  key: 'textState',
  default: '',
});

// Selector to derive the character count from the textState atom
export const charCountState = selector({
  key: 'charCountState',
  get: ({ get }) => {
    const text = get(textState);
    return text.length;
  },
});

JAVASCRIPT

컴포넌트에서 아톰과 셀렉터를 사용하세요

import React from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
import { textState, charCountState } from './state';

function CharacterCounter() {
  // Use Recoil hooks to manage atom and selector state
  const [text, setText] = useRecoilState(textState);
  const count = useRecoilValue(charCountState);

  // Handle text change
  const onChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <p>Character Count: {count}</p>
    </div>
  );
}

export default CharacterCounter;

import React from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
import { textState, charCountState } from './state';

function CharacterCounter() {
  // Use Recoil hooks to manage atom and selector state
  const [text, setText] = useRecoilState(textState);
  const count = useRecoilValue(charCountState);

  // Handle text change
  const onChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <p>Character Count: {count}</p>
    </div>
  );
}

export default CharacterCounter;

JAVASCRIPT

IronPDF 소개

recoil NPM (개발자를 위한 작동 원리): 그림 1 - IronPDF 웹페이지

IronPDF 는 PDF 문서를 생성, 편집 및 변환하는 데 사용되는 인기 있는 PDF 생성 라이브러리입니다. IronPDF npm 패키지는 Node.js 애플리케이션용으로 특별히 설계되었습니다. 다음은 IronPDF npm 패키지의 주요 기능 및 세부 정보입니다.

주요 특징

HTML을 PDF로 변환

HTML 콘텐츠를 PDF 문서로 손쉽게 변환하세요. 이 기능은 웹 콘텐츠에서 동적 PDF를 생성하는 데 특히 유용합니다.

URL을 PDF로 변환

URL에서 직접 PDF를 생성하여 웹 페이지의 콘텐츠를 캡처하고 프로그램 방식으로 PDF 파일로 저장할 수 있습니다.

PDF 조작

기존 PDF 문서를 손쉽게 병합, 분할 및 편집하세요. IronPDF 페이지 추가, 문서 분할 등의 기능을 제공합니다.

PDF 보안

PDF 문서를 암호로 암호화하거나 디지털 서명을 적용하여 보안을 강화하세요. IronPDF 무단 접근으로부터 중요한 문서를 보호할 수 있는 다양한 옵션을 제공합니다.

고품질 출력

텍스트, 이미지 및 서식이 정확하게 표현된 고품질 PDF 문서를 제작하세요. IronPDF 생성된 PDF 파일이 원본 콘텐츠와 동일한 품질을 유지하도록 보장합니다.

크로스 플랫폼 호환성

IronPDF 는 Windows, Linux, macOS를 비롯한 다양한 플랫폼과 호환되므로 폭넓은 개발 환경에 적합합니다.

간단한 통합

IronPDF의 npm 패키지를 사용하면 IronPDF Node.js 애플리케이션에 쉽게 통합할 수 있습니다. API 문서가 잘 되어 있어 프로젝트에 PDF 생성 기능을 쉽게 통합할 수 있습니다.

설치

IronPDF NPM 패키지를 설치하려면 다음 명령어를 사용하십시오.

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64

SHELL

IronPDF 와 Recoil을 사용하여 PDF 생성하기

필수 구성 요소 설치: 먼저, Next.js 프로젝트를 새로 생성하세요(아직 생성하지 않았다면). 자세한 설정 방법은 Next.js 설정 튜토리얼을 참조하거나 다음 명령어를 사용하세요.

npx create-next-app@latest recoil-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

npx create-next-app@latest recoil-pdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

SHELL

다음으로 프로젝트 디렉토리로 이동하세요.

cd recoil-pdf

cd recoil-pdf

SHELL

필요한 패키지를 설치하세요:

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add recoil

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add recoil

SHELL

Recoil을 포함시키기 위해 'app.js' 파일을 다음과 같이 추가하세요.

import React from 'react';
import { RecoilRoot } from 'recoil';

export default function App({ Component, pageProps }) {
  return (
    <RecoilRoot>
      <Component {...pageProps} />
    </RecoilRoot>
  );
}

import React from 'react';
import { RecoilRoot } from 'recoil';

export default function App({ Component, pageProps }) {
  return (
    <RecoilRoot>
      <Component {...pageProps} />
    </RecoilRoot>
  );
}

JAVASCRIPT

PDF 생성 API: 첫 번째 단계는 PDF 문서를 생성하는 백엔드 API를 만드는 것입니다. IronPDF 서버 측에서만 실행되므로 사용자가 PDF를 생성하고자 할 때 호출할 API를 만들어야 합니다. 경로 pages/api/pdf.js에 파일을 생성하고 아래 코드 내용을 추가하세요:

// pages/api/pdf.js
import { IronPdfGlobalConfig, PdfDocument } from '@ironsoftware/ironpdf';

// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key";

export default async function handler(req, res) {
  try {
    const url = req.query.url;
    const pdf = await PdfDocument.fromUrl(url);
    const data = await pdf.saveAsBuffer();
    res.setHeader('Content-Type', 'application/pdf');
    res.setHeader('Content-Disposition', 'attachment; filename=awesomeIron.pdf');
    res.send(data);
  } catch (error) {
    console.error('Error generating PDF:', error);
    res.status(500).end();
  }
}

// pages/api/pdf.js
import { IronPdfGlobalConfig, PdfDocument } from '@ironsoftware/ironpdf';

// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Your license key";

export default async function handler(req, res) {
  try {
    const url = req.query.url;
    const pdf = await PdfDocument.fromUrl(url);
    const data = await pdf.saveAsBuffer();
    res.setHeader('Content-Type', 'application/pdf');
    res.setHeader('Content-Disposition', 'attachment; filename=awesomeIron.pdf');
    res.send(data);
  } catch (error) {
    console.error('Error generating PDF:', error);
    res.status(500).end();
  }
}

JAVASCRIPT

IronPDF 사용하려면 라이선스 키가 필요합니다. IronPDF 평가판 라이선스 페이지 에서 라이선스 키를 발급받아 위의 코드에 붙여넣으세요.

아래 코드를 추가하여 사용자로부터 URL을 받아 PDF를 생성하고 index.js 파일에 저장하세요:

import Head from 'next/head';
import styles from '../styles/Home.module.css';
import React from 'react';
import { atom, useRecoilState } from 'recoil';

// Atom to store user input URL
const textState = atom({
  key: 'textState', // unique ID (with respect to other atoms/selectors)
  default: '', // default value (aka initial value)
});

export default function Home() {
  const [text, setText] = useRecoilState(textState);

  // Function to generate PDF from URL
  const generatePdf = async () => {
    try {
      const response = await fetch('/api/pdf?url=' + text);
      const blob = await response.blob();
      const url = window.URL.createObjectURL(new Blob([blob]));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', 'awesomeIron.pdf');
      document.body.appendChild(link);
      link.click();
      link.parentNode.removeChild(link);
    } catch (error) {
      console.error('Error generating PDF:', error);
    }
  };

  // Handle input change
  const handleChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div className={styles.container}>
      <Head>
        <title>Generate PDF Using IronPDF</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <h1>Demo Recoil NPM and Generate PDF Using IronPDF</h1>
        <input type="text" value={text} onChange={handleChange} placeholder="Enter URL" />
        <button style={{ margin: 20, padding: 5 }} onClick={generatePdf}>
          Generate PDF
        </button>
      </main>
      <style jsx>{`
        main {
          padding: 5rem 0;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
        footer {
          width: 100%;
          height: 100px;
          border-top: 1px solid #eaeaea;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        footer img {
          margin-left: 0.5rem;
        }
        footer a {
          display: flex;
          justify-content: center;
          align-items: center;
          text-decoration: none;
          color: inherit;
        }
        code {
          background: #fafafa;
          border-radius: 5px;
          padding: 0.75rem;
          font-size: 1.1rem;
          font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
            DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
        }
      `}</style>
      <style jsx global>{`
        html,
        body {
          padding: 0;
          margin: 0;
          font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
            Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
            sans-serif;
        }
        * {
          box-sizing: border-box;
        }
      `}</style>
    </div>
  );
}

import Head from 'next/head';
import styles from '../styles/Home.module.css';
import React from 'react';
import { atom, useRecoilState } from 'recoil';

// Atom to store user input URL
const textState = atom({
  key: 'textState', // unique ID (with respect to other atoms/selectors)
  default: '', // default value (aka initial value)
});

export default function Home() {
  const [text, setText] = useRecoilState(textState);

  // Function to generate PDF from URL
  const generatePdf = async () => {
    try {
      const response = await fetch('/api/pdf?url=' + text);
      const blob = await response.blob();
      const url = window.URL.createObjectURL(new Blob([blob]));
      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', 'awesomeIron.pdf');
      document.body.appendChild(link);
      link.click();
      link.parentNode.removeChild(link);
    } catch (error) {
      console.error('Error generating PDF:', error);
    }
  };

  // Handle input change
  const handleChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div className={styles.container}>
      <Head>
        <title>Generate PDF Using IronPDF</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main>
        <h1>Demo Recoil NPM and Generate PDF Using IronPDF</h1>
        <input type="text" value={text} onChange={handleChange} placeholder="Enter URL" />
        <button style={{ margin: 20, padding: 5 }} onClick={generatePdf}>
          Generate PDF
        </button>
      </main>
      <style jsx>{`
        main {
          padding: 5rem 0;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
        footer {
          width: 100%;
          height: 100px;
          border-top: 1px solid #eaeaea;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        footer img {
          margin-left: 0.5rem;
        }
        footer a {
          display: flex;
          justify-content: center;
          align-items: center;
          text-decoration: none;
          color: inherit;
        }
        code {
          background: #fafafa;
          border-radius: 5px;
          padding: 0.75rem;
          font-size: 1.1rem;
          font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
            DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
        }
      `}</style>
      <style jsx global>{`
        html,
        body {
          padding: 0;
          margin: 0;
          font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
            Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
            sans-serif;
        }
        * {
          box-sizing: border-box;
        }
      `}</style>
    </div>
  );
}

JAVASCRIPT

코드 설명

Recoil에서 const textState = atom()을 사용하여 원자 상태를 생성하고, 사용자가 입력 필드에 입력한 URL을 저장하는 데 사용합니다.
제목, 입력란 및 버튼 구성 요소를 추가합니다.
yarn dev을 사용하여 애플리케이션을 실행한 다음, PDF로 생성하고자 하는 웹사이트의 URL을 입력합니다.
'PDF 생성' 버튼을 클릭하면 요청한 PDF 파일이 생성됩니다. 아래 그림과 같이:

출력

웹사이트의 모습은 다음과 같습니다.

recoil NPM (개발자를 위한 작동 원리): 그림 2 - PDF를 생성하는 웹사이트

URL https://ironpdf.com/nodejs/이 주어졌을 때 생성된 PDF:

recoil NPM (개발자를 위한 작동 원리): 그림 3 - IronPDF로 생성된 출력 PDF

IronPDF 라이선스

recoil NPM (개발자를 위한 작동 원리): 그림 4 - IronPDF 라이선싱 페이지

IronPDF 평가판 라이선스를 사용하면 구매 전에 다양한 기능을 확인해 볼 수 있습니다. 영구 라이선스에 대한 자세한 내용은 IronPDF 라이선스 정보 페이지에서 확인할 수 있습니다.

라이선스 키를 여기에 입력하세요:

import { IronPdfGlobalConfig, PdfDocument } from '@ironsoftware/ironpdf';
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";

import { IronPdfGlobalConfig, PdfDocument } from '@ironsoftware/ironpdf';
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";

JAVASCRIPT

결론

Recoil은 React 애플리케이션에서 상태 관리를 위한 현대적이고 효율적인 접근 방식을 제공합니다. 세밀한 업데이트, 동시 모드와의 호환성, 그리고 비동기 상태 처리의 용이성 덕분에 확장성과 성능이 뛰어난 React 앱을 구축하려는 개발자에게 매력적인 선택지가 됩니다.

Recoil은 아톰과 셀렉터를 활용하여 모듈식의 직관적인 방식으로 전역 상태를 관리할 수 있도록 함으로써 전반적인 개발 경험을 향상시킵니다. IronPDF Node.js 라이브러리 (npm 패키지)는 PDF 생성 및 읽기 기능을 제공하는 Enterprise급 패키지입니다. 개발자는 IronPDF 라이브러리를 사용하여 이러한 기능을 앱에 쉽게 통합할 수 있습니다.

다리우스 세란트

지금 바로 엔지니어링 팀과 채팅하세요

풀스택 소프트웨어 엔지니어 (웹 운영)

다리우스 세런트는 마이애미 대학교에서 컴퓨터 과학 학사 학위를 받았으며, Iron Software에서 풀 스택 웹 운영 마케팅 엔지니어로 근무하고 있습니다. 어린 시절부터 코딩에 매료되었던 그는 컴퓨팅이 신비로우면서도 접근하기 쉬운 분야라고 생각했고, 창의력과 문제 해결 능력을 발휘하기에 완벽한 매체라고 여겼습니다.

Iron Software에서 다리우스는 새로운 것을 만들고 복잡한 개념을 단순화하여 더 쉽게 이해할 수 있도록 하는 것을 즐깁니다. 그는 사내 개발자로서 학생들을 가르치는 데에도 자원하여 차세대 인재들과 전문 지식을 공유하고 있습니다.

다리우스에게 있어 그의 일은 가치 있고 실질적인 영향을 미치기 때문에 보람 있는 일입니다.

uuid NPM (개발자를 위한 작동 방식)

NPM 재설계 (개발자를 위한 ...

고객 성공 사례:

주목할 만한 개발자:

웹 세미나:

30일 무료 체험 시작하기

리코일 NPM (개발자를 위한 작동 방식)

리코일 패키지란 무엇인가요?

핵심 개념

반동의 이점

리코일 시작하기

Recoil을 설치하려면 npm을 실행하세요.

RecoilRoot 설정하기

원자와 선택자를 정의합니다.

컴포넌트에서 아톰과 셀렉터를 사용하세요

IronPDF 소개

주요 특징

HTML을 PDF로 변환

URL을 PDF로 변환

PDF 조작

PDF 보안

고품질 출력

크로스 플랫폼 호환성

간단한 통합

설치

IronPDF 와 Recoil을 사용하여 PDF 생성하기

코드 설명

출력

IronPDF 라이선스

결론

아이언 서포트 팀

30일 무료 체험 시작하기

리코일 NPM (개발자를 위한 작동 방식)

리코일 패키지란 무엇인가요?

핵심 개념

반동의 이점

리코일 시작하기

Recoil을 설치하려면 npm을 실행하세요.

RecoilRoot 설정하기

원자와 선택자를 정의합니다.

컴포넌트에서 아톰과 셀렉터를 사용하세요

IronPDF 소개

주요 특징

HTML을 PDF로 변환

URL을 PDF로 변환

PDF 조작

PDF 보안

고품질 출력

크로스 플랫폼 호환성

간단한 통합

설치

IronPDF 와 Recoil을 사용하여 PDF 생성하기

코드 설명

출력

IronPDF 라이선스

결론

관련 기사

linkify-react (작동 방식: 개발자 가이드)

Next-Auth NPM (개발자를 위한 작동 방식)

Koa Node.js (개발자를 위한 작동 방식)

Want to deploy IronSuite to a live project for FREE?

What’s included?

Thank You

Want to deploy IronSuite to a live project for FREE?

What’s included?

전 세계 수백만 엔지니어들이 신뢰하는 제품입니다.

아이언 서포트 팀