Recoil
-
terminal에서 npm install recoil
-
atoms.ts 생성
-
atoms.ts 작성
import { atom } from 'recoil';
export const (Atomname) = atom({
property key: property value,
default: (boolean value),
});4.App.tsx 작성
import {useRecoilValue} from 'recoil';
import { (Atomname) } from './atoms';
const (varname) = useRecoilValue(Atomname);5.Atom을 사용할 컴포넌트에 입력
import {useRecoilValue} from 'recoil';
import { (Atomname) } from './atoms';
const (varname) = useRecoilValue(Atomname)atom의 value를 연결하기 위해서는 useRecoilValue라는 훅을 쓴다
recoil 사용법 2
atom을 다른 컴포넌트에서 조작하기
atom에 작성된 value를 수정하기 위해서는 useRecoilValue가 아닌 useSetRecoilState를 사용하여 setter function을 받는다.
useState의 setter함수처럼, useSetRecoilstate는 value를 수정 권한을 갖는 function이다.
1.value를 조작하려고 하는 component에 useSetRecoilState 작성
const (varname) = useSetRecoilState(Atomname)2.setState처럼 useSteRecoilState를 사용하면 되는데 작성된 변수명을 setState처럼 조작해야 한다.
//function
const handler = () => {
varname( //function )
}전역상태(Recoil)는 2단계 이상 프롭스를 드릴링 할 때 사용한다.
React Hook form 을 사용하기 전에 input value를 state에 전달하여 form의 summit까지 전달하는 과정
import React, { useState } from 'react';
const ToDoList = () => {
const [inputVal, setInputVal] = useState('');
const changeInputValue = (e: React.FormEvent<HTMLInputElement>) => {
const {
currentTarget: { value },
} = e;
setInputVal(value);
};
const submitFormValue = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
console.log(inputVal);
};
return (
<div>
<form onSubmit={submitFormValue}>
<input
value={inputVal}
onChange={changeInputValue}
type="text"
placeholder="Write a to do"
/>
<button>ADD</button>
</form>
</div>
);
};
export default ToDoList;
---
// recoil atom을 사용하기 위해서는 고유한 key가 필요하다.
const toDoState = atom({
key: 'todo',
default: [],
});
// atom에서 state를 가져옴(useRecoilValue)
const value = useRecoilValue(toDoState);
// 가져온 state를 조작할 수 있음.(useSetRecoilState)
const modfn = useSetRecoilState(toDoState);
// useState처럼 state를 사용하거나, 조작할 수 있음.
const [x,setX] = useRecoilState(toDoState)Recoil Selector
Selector 사용 3단계
1.selector를 정의하고 고유키를 설정하고
2.get을 통해 가져올 atom을 할당하고
3.참조하고 있는 atom을 어떻게 변형시켜서 return 할 것인지 작성.
Selector를 이용하면 또 다른 state를 만들 수 있다.
Selector ? state를 입력받고, (입력 받은 state를 변형해 반환하는 순수함수를 거쳐) (반환된 값)을 말합니다.
Selector는 state를 사용자가 원하는 대로 변형할 수 있게 만듦.
Selector를 사용하면 데이터에 체계화된 방식으로 접근할 수 있다.
한 곳에 데이터를 몰아놓고 컴포넌트에서 수정하는 것보다
atom에 데이터를 모아두고 selector로 변형한다. (실제값이변경되지는않음)
그리고 Selector는 어떤 state에도 접근할 수 있다.
아톰은 기본적으로 텅 빈 배열
Selector는 todo(입력받는값)를 하나의 atom으로 관리하면서,
atom의 반환값을 더 유용하게 사용할 수 있는 형태로 변형하게 해준다
Selector는 atom의 output을 변형시키는 Recoil의 도구
atom은 그냥 배열이다???
atom의 output을 변형시키는 것은 selector다.
selector는 atom의 state를 가져다가 뭔가를 return한다.
그래서 derived state라고 함
Selector도 atom과 같이 고유한 key가 필요하다.
Selector는 추가적으로 get이라는 프로퍼티 키를 받는다.
get은 인자를 객체로 받는데, 2가지 프로퍼티를 받는다.
get : GetRecoilValue;
getCallback: GetCallback;
사용법
1.atom에 selector 작성
export const toDoSelector = selector({
key: 'toDoSelector',
get: ({ get }) => {
return 'hello';
};
});
2.JSX에 selector를 useRecoilValue로 불러옴.
const selectorOutput = useRecoilValue(selectorName)
console.log(selectorOutput)을 해보면, get function으로 리턴하는 값을 받아 오는 것을 알 수 있다.
다만 리턴 값이 hello인건 쓰임새가 없다.
get은 값으로 options라는 객체를 받는데, 그 객체에는 get function이 들어있다.
그래서 파라미터는 디스트럭쳐링 된 get 사용되야 한다.
그리고 받아 올 변수를 만들어 atom을 get에 담아 할당한다.
즉 get function은 atom의 state를 가져 올 함수이다.
const foo = get(atoms)
이후 selector를 JSX로 전달한다. (immutatable)
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'),
];
},
});
selector가 atom을 바라보게 함. atom이 change되면 Selector도 change 됨.
이렇게되면 기존에 atom의 state와 selector의 state를 모두 받아올 수 있게 됨
단순하게 atom의 값만 받는게 아니라 아톰의 값을 변형시켜 return하고 있다 (detrived state)
사용 시 기억해야 할 부분
selector를 사용할 때 useRecoilValue의 리턴값은 배열이다.
배열 안의 배열을 선택하려면 배열 디스트럭쳐링으로 배열을 열고 순서대로 변수명을 기입하면 된다.
const [ todo, doing, done ] = useRecoilValue(toDoSelector)
배열이 리턴값일때에는 이런식으로 짧게 쓸 수 있다.
enum = enumerable // 계속 사용하는 값을 저장할 수 있는 도구
타이핑해야 하는(하드코딩) 것들을 저장해두어 실수를 미연에 방지할 수 있다.
기본값은 Index로 생성되지만, String값을 할당할 수도 있다.
export enum Categories {
'To_Do' = "To_Do",
'DOING' = "Doing",
'DONE' = "DONE"
}
딜리트버튼
아톰의 디폴트스테이트 // toDo localstorage에 저장해서 가져오기
recoil - atom - seletor 기능
state로부터 데이터를 만들 수 있는 기능.
typescript
category: "To Do" | "DOING" | "DONE"
state 배열로 반환하기
setState(prev => [...prev])
콜백함수에 인자를 담아 넘겨주기 위해서 arrowfunction을 사용한다
const funcname = (parameters) =>{};
onClick ={() => funcname(arguments)}
