> For the complete documentation index, see [llms.txt](https://shindongri89.gitbook.io/recoil-todo-list/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shindongri89.gitbook.io/recoil-todo-list/1..md).

# 1. 프로젝트 설정

## 1. 리액트 프로젝트 생성

```bash
npx create-react-app recoil-todo-list --template typescript
```

## 2. 불필요한 파일 제거

```
cd recoil-todo-list/src
rm -rf App.css App.test.tsx logo.svg 
```

## 3. 패키지 설치

* [@emotion/styled](https://github.com/emotion-js/emotion) : 컴포넌트 스타일링 (CSS-In-JS)
* [react-icons](https://www.npmjs.com/package/react-icons) : 아이콘
* [recoil](https://github.com/facebookexperimental/Recoil) : 상태 관리 라이브러리
* [uuid](https://www.npmjs.com/package/uuid) : uuid - Todo 의 유니크한 키(Key)

```bash
npm i @emotion/styled react-icons recoil uuid
```

## 4. Hello Recoil !

```jsx
// src/App.tsx

import React from 'react';

function App() {
  return (
    <div>
      Hello Recoil !
    </div>
  );
}

export default App;

```