Recoil 적응기

개인프로젝트를 진행하는 과정에서 전역상태관리를 접하고 싶어 다양한 라이브러리중 Recoil을 선택하여 진행하였습니다.

선택이유 : 우선 전역상태관리 라이브러리 중에 redux, recoil을 고민하고 있었는데 공부를 하다보니 recoil이 redux에 비교적 접근성이 쉽고 간단한 코드로 관리가 가능한것 입니다.

atom과 selector로 나누어서 atom에는 상태관리 로직을 구현하고 사용법은 useState와 비슷하게 구현할 수 있어서 이해가 편했습니다.

import { atom } from 'recoil'
import { Address } from '../../components/Form/AddressInput'
import { recoilPersist } from 'recoil-persist'

export interface PostState {
    id?: string
    title: string
    date: string
    address: Address
    selectedCategories: number
    showTime: number
    performer: string
    price: number
    selectedImage: string | null
    descriptionImage: string | null
    description: string
}
const { persistAtom } = recoilPersist()
export const postState = atom<PostState[]>({
    key: 'postState',
    default: [],
    effects_UNSTABLE: [persistAtom],
})

export const showInputState = atom<PostState>({
    key: 'showInputState',
    default: {
        id: '',
        title: '',
        date: new Date().toISOString().slice(0, 10),
        address: {
            areaAddress: '',
            townAddress: '',
        },
        selectedCategories: 1,
        showTime: 0,
        performer: '',
        price: 0,
        selectedImage: null,
        descriptionImage: null,
        description: '',
    },
})

Atom

먼저 atom코드로는 게시글의 타입을 지정하고 게시글 상태값은 postState로 관리하였고 showInputState로 게시글 각각의 값들을 관리하였습니다.

트러블슈팅

처음 atom으로 상태관리할때 전체 게시물 상태관리는 정상적으로 하였지만 게시물 각각의 상태값들은 생각을 못해서 useState로 따로 해야하는건가 고민했지만 이것도 따로 관리를 하면 편할것 같다는 생각으로 진행해봤습니다.

이전코드

// 게시글 내용관리
	const [title,setTitle] = useState('')
	const [date,setDate] = useState('')
//  ..... 나머지 상태값들
// 게시글 상태관리
    const setPost = useSetRecoilState(postState)

수정코드

// 게시글 내용관리
    const [showInput, setShowInput] = useRecoilState(showInputState)

    // 게시글 상태관리
    const setPost = useSetRecoilState(postState)

Selector

selector는 지금은 프로젝트 작업중이지만 조회와 쓰기 기능인 get,set을 활용해서 필터링이 필요할때 사용하는것으로 이해했습니다.
우선은 전체조회로 먼저 사용해보고 필터에 맞는 코드를 구현하려고 합니다.

전체조회

export const getAllPostSelectors = selector({
    key: 'getAllPostsSelector',
    get: async function firebaseDataSelector({ get }) {
        try {
            const querySnapshot = await getDocs(collection(db, 'show'))
            const data = querySnapshot.docs.map((doc) => {
                const postData = doc.data()
                const post: Partial<PostState> = {
                    id: doc.id,
                    ...postData,
                }
                return post as PostState
            })
            return data
        } catch (error) {
            console.error('error', error)
        }
    },
})

지금은 recoil 적응중이지만 기존 useState로 상태관리를 해왔는데 코드적으로도 가독성이 좋은것같고 필요한 페이지에 불러올 수 있다는것에 편리함을 느꼈습니다.