Recoil, Recoil-Persist를 이용한 상태관리

오늘 내가 배운 것

1. Recoil

2. Recoil 설치

3. Recoil 사용하기

4. 컴포넌트에서 Recoil 상태 값 사용하기

5. Recoil 상태 유지하기 (Recoil-Persist)

 

 

 

1. Recoil

현재 프로젝트에서 전역으로 상태를 관리하기 위해서 Recoil을 사용하고 있다.
기존에 Redux를 이용해서 상태를 관리하면서 프로젝트를 진행할 때 많은 불편함을 느꼈다. 프로젝트에서 관리할 상태가 많아지면 보일러플레이트 코드가 커지는 게 큰 단점이었는데, Recoil을 이용해서 간단하게 해결할 수 있었다. 이제 막 배워서 적용하는 단계라 많이 미숙하게 사용하고 있지만 Redux에 비해 편하게 사용할 수 있다는 장점으로 Recoil을 시작하여 배우고 있다.

2. Recoil 설치

$ npm install recoil

3. Recoil 사용하기

RecoilRoot

리코일은 전역으로 상태를 관리하기 위해서 사용하기 때문에 사용하는 컴포넌트의 상위 컴포넌트에 RecoilRoot로 감싸야한다. 그래서 모든 컴포넌트에서 전역 상태로 관리하기 위해서 root컴포넌트에 RecoilRoot로 감싸서 사용한다.

CRA를 이용하여 프로젝트를 할 때 전역에서 사용하는 요소가 많기 때문에 App위에 있는 Index.tsx에서 App컴포넌트를 감싸는 방향으로 진행했다.

root.render(
    <RecoilRoot>
        <App />
    </RecoilRoot>
)

이렇게 설정하므로써 App 컴포넌트부터 하위에 있는 모든 컴포넌트에서 Recoil 상태를 가져다 쓸 수 있게 된다.

Atom

Atoms는 상태의 단위로 애플리케이션에서 공유되는 상태를 말한다. 공유되는 값은 단일 값이나, Obj, Arr 등 여러 가지로 관리할 수 있다.

사용 예시

import { atom } from "recoil"

const countState = atom({
    key: "countState",
    default: 0,
})

이렇게 Atom을 정의하고 초기값으로 0을 설정하였다. key는 Atom의 고유한 식별자이다.

Selector

Recoil에서 파생된 상태를 계산하기 위해서 사용한다.
하나 이상의 Atom을 가져와서 새로운 값을 계산하는데 사용한다. Selector을 이용하게 되면 상태 변화에 따라 자동으로 계산된다.

사용 예시

import { atom, selector } from "recoil"

const countState = atom({
    key: "countState",
    default: 0,
})

const doubleCountState = selector({
    key: "doubleCountState",
    get: ({ get }) => {
        const count = get(countState)
        return count * 2
    },
})

이렇게 Atom의 값을 이용하여 추가적인 로직을 만들 수 있다. Selector을 이용하면 countState의 값이 변경될 때 자동으로 selector의 값도 변경되어 최신 상태를 유지한다.

4. 컴포넌트에서 Recoil 상태 값 사용하기

컴포넌트에서 지정한 atom과 selector을 사용할 때 대표적으로 useRecoilState, useRecoilValue를 이용할 수 있다.
useRecoilState()의 경우 값을 읽고 변경할 수 있다. useRecoilValue()는 읽기만 가능하다.

useRecoilState()는 useState()와 비슷하게 작성하여 사용하고 useRecoilValue()는 변경이 불가하기 때문에 변수에 바로 받아서 사용할 수 있다.

import { useRecoilState, useRecoilValue } from "recoil"

function Counter() {
    const [count, setCount] = useRecoilState(countState) // 값 업데이트 가능
    const doubleCount = useRecoilValue(doubleCountState) // 읽기만 가능

    const increment = () => {
        setCount(count + 1)
    }
    return (
        <>
            <div>
                <p>Count: {count}</p>
                <p>Double Count: {doubleCount}</p>
                <button onClick={increment}>Increment</button>
            </div>
        </>
    )
}

버튼을 이용하여 함수가 실행될 떄 setCount를 이용하여 atom의 값을 변경할 수 있고 변경이 되면 doubleCount의 값도 자동으로 변경된다.

5. Recoil 상태 유지하기 (Recoil-Persist)

새로고침을 할 때에도 로그인같은 경우 로그인이 풀리면 안 된다. 그러기 위해서 로컬 스토리지에 저장해야 한다.
localStorage.setItem()을 이용해서 추가하고 getItem()을 이용해서 불러오는 과정을 사용해도 되지만 Recoil-Persist라는 라이브러리를 이용하면 상태가 바뀔 때 localStorage에도 추가가 되어 하드코딩을 하는 것보다 편하게 localStorage에서 데이터를 주고받을 수 있다.

사용 예시

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

//옵션을 주지 않고 기본으로 사용할 수 있지만 key값이 persi
const { persistAtom } = recoilPersist()

//아래와 같이 지정할 수 있다.
const { persistAtom } = recoilPersist({
    key: "", // 원하는 이름
    storage: localStorage, // 또는 sessionStorage
})

const countState = atom({
    key: "countState",
    default: 0,
    effects_UNSTABLE: [persistAtom], // 로컬 스토리지 업데이트
})

 

 

---