[React]recoil selector 사용법

 

selector은 atom으로 만든 인자를 다시 받아와서 atom의 값을 베이스로 새로운 값을 return 해줄 수 있는 함수인데

그러므로 selector은 atom의 값에 영향을 받게 됩니다.

일단 atom을 하나 생성 해줍니다.

 

export const Todos = atom<Itodo[]>({
  key: "ToDos",
  default: [],
});

 

이제 Todos 라는 atom의 값을 selector로 받아와 줍시다.

 

export const toDosSelector = selector({
	key: "toDoSelector",
	get: ( {get} ) => {
		const todos = get(Todos)
		return []
})
}

 

이런식으로 selector를 만들어주고

selector 안에 get이라는 key 값에는 파라미터로 get을 받아와 줄수 있습니다.

원래는 get 안에 파라미터로 option이라는 파라미터가 있으나

option안에 있는 get을 비구조화 할당으로 가지고 옵니다.

그리고 이 get함수는 파라미터로 atom의 이름을 가지게 되고

여기서 저희는 Todos atom을 만들었으므로 파라미터에 넣어줍니다. 이렇게하면 Todos의 값을 todos라는 변수에 담게 되는 것입니다.

여기서는 return 값으로 [] 빈 배열을 주었기 때문에

useRecoilValue를 사용하면 빈배열이 나올 것입니다.

저 todos를 활용해서 return 값에 원하는 값을 넣어주면

다양한 방법으로 사용할 수 있을 것입니다.