Today 요약

1. Recoil

1. What I Learned?

Recoil

설치

yarn add recoii

사용법

사용하는 곳에서 RecoilRoot를 감싼다. 이때 가장 상위에서 한 번만 감싸는 것이 일반적이다.

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

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
root.render(
  <React.StrictMode>
    <RecoilRoot>
      <App />
    </RecoilRoot>
  </React.StrictMode>
)

Atom

redux의 store를 정의하는 것처럼 recoil은 atom을 정의해서 atom마다 state를 정의한다.

Atom은 상태의 일부를 나타낸다. Atoms는 어떤 컴포넌트에서난 읽고 쓸 수 있따. atom의 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독한다. 그래서 atom에 어떤 변화가 있으면 그 atom을 구독하는 모든 컴포넌트들이 리렌더링 된다.

import { atom } from 'recoil'

const basicState = atom({
  key: 'basicState',
  default: ''
})

export default basicState

그렇게 선언하고 사용하는 곳에서는 useState 대신 useRecoilState로 상태의 변경사항을 감지해서 담게 할 수 있다. 그럼 atom의 기본값으로 담겨있게 된다.

import { ChangeEvent } from 'react'
import { useRecoilState } from 'recoil'
import basicState from '../recoil/atoms/basicState'

const TextInput = () => {
  const [text, setText] = useRecoilState(basicState)

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    setText(e.target.value)
  }

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} />
      <br />
      Echo: {text}
    </div>
  )
}

export default TextInput

그리고 recoilValue를 활용해서 추가적으로 동작을 수행할 때는 selector를 정의해서 사용한다.

import { selector } from 'recoil'
import basicState from '../atoms/basicState'

const charCountState = selector({
  key: 'charCountState',
  get: ({ get }) => {
    const text = get(basicState)

    return text.length
  }
})

export default charCountState

basicState의 값을 selector를 통해 변환하고 그렇게 변환된 값을 다시 selector의 state로 저장해서 그 state를 useRecoilValue로 불러와서 사용한다.

import { useRecoilValue } from 'recoil'
import charCountState from '../recoil/selectors/charCountState'

const CharacterCount = () => {
  const count = useRecoilValue(charCountState)

  return <div>CharacterCount: {count}</div>
}

export default CharacterCount

Persist

설치

yarn add recoil-persist

사용은 간단하다. 아래와 같다.

import { atom } from 'recoil'
import { recoilPersist } from 'recoil-persist'

const { persistAtom } = recoilPersist()

const basicState = atom({
  key: 'basicState',
  default: '',
  effects_UNSTABLE: [persistAtom]
})

export default basicState