1
yarn add recoil

1
import React from 'react'
2
import { RecoilRoot } from 'recoil'
3

4
function App() {
5
  return (
6
    <RecoilRoot>
7
      <div>앱 내용</div>
8
    </RecoilRoot>
9
  )
10
}

1
export const counterState = atom({
2
  key: 'counterState', // 고유한 키값
3
  default: 0, // 초기값
4
})

1
import { atom } from 'recoil'
2

3
export const counterState = atom({
4
  key: 'counterState', // 고유한 키값
5
  default: 0, // 초기값
6
})

1
import { Selector } from 'recoil'
2
import { counterState } from './atoms'
3

4
export const squaredCounterState = selector({
5
  key: 'squaredCounterState', // 고유한 키값
6
  get: ({ get }) => {
7
    const counter = get(counterState)
8
    return counter ** 2
9
  },
10
})

1
import React from 'react'
2
import { useRecoilState } from 'recoil'
3
import { counterState } from './atoms'
4

5
export default function Counter() {
6
  // counterState를 사용해 전역 상태값 counter를 가져와 사용
7
  const [counter, setCounter] = useRecoilState(counterState)
8

9
  const increment = () => setCounter(counter + 1)
10
  const decrement = () => setCounter(counter - 1)
11

12
  return (
13
    <div>
14
      <h1>카운트 : {counter}</h1>
15
      <button onClick={increment}>증가</button>
16
      <button onClick={decrement}>감소</button>
17
    </div>
18
  )
19
}

1
import React from 'react'
2
import { useRecoilValue } from 'recoil'
3
import { squardCounterState } from './selectors'
4

5
export default function SquaredCounter() {
6
  // useRecoilValue 훅으로 계산되는 selector 값 가져와서 사용
7
  const squaredCounter = useRecoilValue(squardCounterState)
8
  return <p>제곱 카운트 값 : {counter}</p>
9
}

1
import React from 'react'
2
import { useRecoilValue } from 'recoil'
3
import { counterState } from './atoms'
4

5
export default function ResetCounter() {
6
  // useSetRecoilState 훅으로 카운터 값을 원하는 값으로 변경 (setter 함수)
7
  const setCounter = useSetRecoilState(counterState)
8
  const reset = () => setCounter(0)
9
  return <button onClick={reset}>초기화</button>
10
}

1
import React from 'react'
2
import { useResetRecoilState } from 'recoil'
3
import { counterState } from './atoms'
4

5
export default function ResetCounter() {
6
  // useResetRecoilState 훅으로 counter 값 초기화
7
  const resetCounter = useResetRecoilState(counterState)
8
  const reset = () => resetCounter()
9
  return <button onClick={reset}>초기화</button>
10
}