Recoil / [1] 시작, 설치

 

- 본 게시물은 리코일 공식문서와 learnrecoil.com 강의를 바탕으로 작성된 글입니다. -

 

프론트엔드 상태관리 3대장으로 보통 꼽는것이 redux, mobx, recoil이 있다.

여기서 나는 recoil밖에 써본 경험이 없는데, 지금 듣고 있는 강의에서 redux를 사용할것 같아 강의를 듣기 전

recoil에서 배웠던 내용을 정확히 정리하고, 이후 헷갈리지 않는 상태로 redux강의를 수강하고자 이렇게 글을 작성해본당.

---

리코일은, 수많이 렌더링 되는 다양한 컴포넌트 중에서 독립적으로 자주 업데이트되어야할 필요가 있어 생긴 툴이라고 한다.

 

리코일의 주요 특징은 크게 세가지가 있다.

 

1. 유연한 상태 공유

- 보일러 플레이트가 없다.(다른 프론트엔드 상태 관리 툴과의 큰 차이다)

- 간단한 get / set

- 코드 분할 허용

 

2. 데이터 파생

- 안전하고 간단하게 상태 그리고 다른 파생 데이터에서 데이터를 가져올 수 있다.

- 접근했던 방식과 마찬가지로 데이터를 파생할 수 있다.

- 동기/비동기 방식을 활용해 데이터 파생이 가능하다

 

3. 앱 전역 상태 관찰

- 리코일 상태를 어디서든 읽을수 있다.

- 상태의 변화를 감지할 수 있다.

- 앱 상태를 지속할수 있다.

- rehydration 이 가능하다.

*(rehydration - backwards compatible 이라고 적혀있는데 정확한 뜻을 모르겠다. 조금 찾아보니 호환이 좋다는 말 같긴한데 조금 더 알아봐야할것같다.)

 

---

다양한 상태관리 툴 중에서도 왜 리코일을 사용하는지에 대해서 다양한 의견들이 있지만,

나도 하나씩 공부를 해보고 이후에 나만의 정의를 내려보려고 한다.

 

그러면 일단 리코일을 설치해보장

 

[초간단 리코일 설치 & 사용]

npm install recoil
yarn add recoil

이렇게 하면 설치가 되고 리코일을 사용할 부분에 <RecoilRoot>를 감싸주면 리코일을 사용할 준비 끝!

 

나는 아래의 강의를 따라가면서 해서 다음과 같은 index구조가 나왔따.

Learn Recoil - Free Recoil.js course

 

index.tsx

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import Canvas from './Canvas'
import {ChakraProvider} from '@chakra-ui/react'
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom'
import {RecoilRoot} from 'recoil'

ReactDOM.render(
  <React.StrictMode>
    <RecoilRoot>
      <ChakraProvider>
        <Router>
          <Switch>
            <Route>
              <Canvas />
            </Route>
          </Switch>
        </Router>
      </ChakraProvider>
    </RecoilRoot>
  </React.StrictMode>,
  document.getElementById('root'),
)

요로코롬 최 상단에 RecoilRoot로 감싸주면 됨

 

그리고 이 강의를 들으면서 생각난게, 예전에 리액트 한창 처음 배울때, 이 강의를 들었었는데

typescript으로 짜져있어서 모르겠넹 하고 넘어갔었당.

 

근데 지금은 typescript를 어째어째 써봐서 이해하고 있어서 다행이다

 

이상