리액트 recoil로 상태관리

투두리스트의 추가,삭제,완료(밑줄긋기)의 상태를 업데이트하기 위해 useState대신 recoil로 대체했다
 
1. atom의 id들을 관리하기 위해 배열로 만들었다.

export const idsAtom = atom({
    key:'idsAtom',
    default:[]
})

 
 
2. atomFamily군으로  atom을 효율적으로 관리하기위해 idsAtom의 id들로 분할

export const todoAtom = atomFamily({
    key:'todoAtom',
    default:null
})

 
 
3. selector의 get은 atom의 배열로 만든 id 값을 가져와서 새로운 상태값을 계산한다.

export const todoListSelector = selector({
    key:'todoListSelector',
    get:({get}) => {
        const ids = get(idsAtom)
        return ids.map(id => get(todoAtom(id)))
    },

 
 
4. selector의 set은 상태를 업데이트하는 역할이다.(type에따라 추가,삭제등 업데이트를 할수있다)
5. 삭제시 reset(함수초기화)
6. todoAtom(newItem.id)는 idsAtom 배열안에 들어 있는 id들의 고유키를 통해 atom의 id를 참조하고있다

set:({set,reset}, {type,id,newItem}) => {
        switch(type) {
            case 'add':
                set(todoAtom(newItem.id),newItem)
                set(idsAtom,ids => [...ids,newItem.id])
                break;
            
            case 'done':
                set(todoAtom(id),todo => ({...todo,isDone:true}));
                break;
            case 'remove':
                reset(todoAtom(id))
                set(idsAtom,ids => ids.filter(e => e !== id))
                break;
            default:
                throw new Error('타입이 유효하지않음')
        }
    }
})

 
 
7. 타입유형에 따라 추가,완료(밑줄긋기),삭제등을 원할히 관리할 수 있다.

// 추가
const handleAdd = () => {
        const newId = Math.max(...(ids.length ? ids : [0]))+1
        setTodo({
            type:'add',
            newItem: {
                id:newId,
                title,
                isDone:false
            }
    })
    }

// 완료(밑줄긋기)
    const handleDone = e => {
        setTodo({
            type:'done',
            id:Number(e.target.dataset.id)
        }
        )
    }

// 삭제
    const handleRemove = e => {
        setTodo({
            type:'remove',
            id:Number(e.target.dataset.id)
        })
    }

 
 
 

참고한 책입니다
https://m.yes24.com/Goods/Detail/134020954

따라하며 쉽게 배우는 모던 리액트 완벽 입문 - 예스24