recoil Atom 사용방법

Atom

리코일에서 상태의 최소단위 

selector 

Atom을 기반으로 파생된 데이터

 

설치방법

yarn add recoil

 

Recoil Root컴포넌트

최상위 컴포넌트(index.js)를 감싸준다.

<RecoilRoot>
	<APP/>
</RecoilRoot>

 

1. 아톰이 있을 위치를 만들어준다.

src -> recoil(폴더생성) -> 상태를 저장할 OOOAtom.js 파일만든다.

 

아톰에는 key와 default값을 적어줘야한다.

 

import {atom} from 'recoil'

export const OOOAtom = atom({
	key:'',(아톰의 이름)
    default:[]
})

key는 중복되지않게 처리를 해줘야한다!! 

 

2. 전역상태관리소의 값을 불러와야한다.

// value만 쓸 경우
const state = useRecoilValue('값')

// Set함수감 사용할 경우
const setState = useSetRecoilState('값')

 

3. 값을 추가

const [StoreFilter,serStoreFilter] = useRecoilState(OOOAtom)

 

- 전역관리소에 값이 있는지 여부를 확인 

// const isAlreadyInFilter = StoreFilter.filter((e)=>e.id === id).length

 const isAlreadyInFilter = StoreFilter.findIndex((e)=>e.id === id)!== -1

- 전역관리소에 값을 추가

if(isAlreadyInFilter){
	serStoreFilter((prev)=>[...prev,data])
}