본문으로 건너뛰기

설치

NPM​

Recoil 패키지는 npm에 존재한다. 안정화된 최신 버전을 설치하려면 아래의 명령어를 실행하면 된다:

npm install recoil

또는 yarn을 사용한다면:

yarn add recoil

Bundler​

Recoil은 Webpack 또는 Rollup과 같은 모듈 번들러와도 문제없이 호환된다.

ES5 지원​

Recoil 빌드는 ES5로 트랜스파일 되지 않으므로, Recoil을 ES5와 사용하는 것은 지원하지 않는다. ES6 기능을 natively하게 제공하지 않는 브라우저를 지원해야 하는 경우 Babel로 코드를 컴파일하고 preset @babel/preset-env을 이용하여 이를 수행할 수는 있지만 문제가 발생할 수도 있다.

특히, React와 같이, Recoil은 ES6의 Map과 Set 타입에 의존하는데, 이러한 ES6의 요소들을 polyfills를 통해 에뮬레이션하는 것은 성능상의 문제를 야기할 수 있다.

CDN​

버전 0.0.11 이후, Recoil은 <script> 태그에 직접 사용될 수 있는 UMD 빌드를 제공하며 Recoil 심볼을 글로벌 네임스페이스에 노출한다. 최신 버전으로부터 예기치 않은 손상을 방지하기 위해 안정된 특정 버전 번호 및 빌드에 연결하는 것이 좋다.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/recoil.production.js"></script>

CDN의 모든 Recoil 파일은 jsdelivr에서 찾아볼 수 있다.

ESLint​

프로젝트에서 eslint-plugin-react-hooks을 사용하는 경우, 예를 들어 다음과 같이 eslint 설정을 사용하는 경우:

// 이전의 .eslint 설정
{
  "plugins": ["react-hooks"],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}

'useRecoilCallback'을 additionalHooks 목록에 추가하는 것이 좋다. 이를 추가하면, ESLint는 useRecoilCallback()을 사용하기 위해 전달된 종속성이 잘못 지정되었을 때 경고를 표시하고 해결 방안을 제시한다. additionalHooks의 형식은 정규식(regex) 문자열이다.

// 수정된 .eslint 설정
{
  "plugins": ["react-hooks"],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": [
      "warn",
      {
        "additionalHooks": "useRecoilCallback"
      }
    ]
  }
}

Nightly Builds​

우리는 매일 한 번씩 현재의 main 브랜치에 기반하여 패키지를 빌드하고 GitHub에 nightly 브랜치로 배포한다. 아래의 npm 명령어를 통해 nightly 브랜치를 이용할 수 있다:

npm install https://github.com/facebookexperimental/Recoil.git#nightly

또는 yarn:

yarn add https://github.com/facebookexperimental/Recoil.git#nightly

또는 package.json 파일에 종속성을 추가한 뒤, npm install 또는 yarn 명령어를 실행하면 된다:

  "recoil": "facebookexperimental/Recoil.git#nightly",