728x90
# atom
atom은 상태 한개의 단위를 의미한다.
atom을 불러오기 위해서는 useRecoilState라는 훅을 사용한다.
export const wonState = atom({
key: "wonState",
default: 0,
});
# selector
- key값을 선언해주고 get이라는 요소가 들어간다.
값을 처리할 함수라고 생각하면 된다. 하지만 무조건 어떤 값을 return 해줘야한다.
-get function을 이용하면 selector 내부에 여러 atom들을 가져올수 있다.
export const dollarState = selector({
key: "dollarState",
get: ({ get }) => get(wonState) / 1400,
set: ({ set }, dollar) => set(wonState, dollar * 1400),
});
export const toDoSelector = selector({
key: "toDoSelector",
get: ({ get }) => {
const toDos = get(toDoState);
return [
toDos.filter((toDo) => toDo.category === "To_Do"),
toDos.filter((toDo) => toDo.category === "DOING"),
toDos.filter((toDo) => toDo.category === "DONE"),
];
},
});
728x90
'부트캠프교육중 > react' 카테고리의 다른 글
[React] react-router-dom 6.4 (0) | 2023.08.24 |
---|---|
[React] react memo (0) | 2023.08.24 |
[React] dark모드, white모드의 첫걸음 (0) | 2023.08.18 |
[React] styled component 활용 (0) | 2023.08.18 |
[React] styled components에서 attrs (0) | 2023.08.18 |