Lean Recoil 강의 정리 : Atom Families / Selector Families

Atom Family : Id로 동일한 아톰 여러개 만들 때 사용

id

export const elementState = atomFamily<Element, number>({
    key: 'element',
    default: {
        style: {
            position: {top: 0, left: 0},
            size: {width: 200, height: 200},
        },
    },
})


// 새로운 id가 들어올 때마다 Map처럼 작동하여 새로운 객체를 만들어준다.
const [element, setElement] = useRecoilState(elementState(id))

 

SelectorFamily : 파생 상태를 ID 별로 다르게

// 타입스크립트 : id , 파라미터 순서
const editProperty = selectorFamily<number, {path: string; id: number}>({
    key: 'editProperty',
	// parameter가 먼저 오는 고차함수
    get: ({path, id}) => ({get}) => {
        const element = get(elementState(id))
        return _.get(element, path)
    },
	// parameter가 먼저 오는 고차함수
    set: ({path, id}) => ({get, set}, newValue) => {
        const element = get(elementState(id))
        const newElement = produce(element, (draft) => {
            _.set(draft, path, newValue)
        })
        set(elementState(id), newElement)
    },
})
// 아래와 같이 사용 - 초기값 필요!
const [value, setValue] = useRecoilState(editProperty({path, id}))
<NumberInput value={value} onChange={(_, value) => setValue(value)}/>

아래 프로젝트의 Rectangle.tsx / EditProperties.tsx 파일을 참고한다.

 

 

Selector의  장점

get, set 로직이 한곳에 위치함. (응집도 up)

Atom과 동일한 API, (심지어 useState와도)

해당 속성을 이용하여 데이터, 로직을 쉽게 공유할 수 있음.

 

 

주의사항

SelectorFamiliy는 파라미터에 따라 다르게 동작 할 수 있음에 유의함

Recoil은 파라미터를 직렬화하여 값 동등 비교를 수행함. 따라서 직렬화 가능해야함

 

리코알운 직렬화 후 파라미터 겂욿 비교함

userState의 두 상태는 동일하다.