공부기록, 2021-08-03(recoil 사용예제)

- recoil 사용예제
- recoil count Atom 세팅
```
import { atom } from 'recoil';

export const countState = atom({
key: 'countState', // 해당 atom의 고유 key
default: 0, // 기본값
});
```

- count 를 보여주고 변경하는 컴포넌트 작용
```
import { useRecoilState, useSetRecoilState, useResetRecoilState } from 'recoil';
import { countState } from '../../recoil/count';

function ReadWriteCount() {
const [ count, setCount ] = useRecoilState(countState); // useRecoilState 을 통한 value, setter 반환
const setCountUseSetRecoilState = useSetRecoilState(countState); // 값을 변경하는 함수만 반환
const resetCount = useResetRecoilState(countState); // 설정된 기본값으로 리셋
return (

 

읽기 쓰기 카운트 컴포넌트

 

카운트 {count}

setCount(count + 1)}>숫자 증가
setCount(count - 1)}>숫자 감소
setCountUseSetRecoilState(count + 1)}>숫자 증가 (useSetRecoilState 사용)
setCountUseSetRecoilState(count - 1)}>숫자 감소 (useSetRecoilState 사용)
카운트 리셋

);
}

export default ReadWriteCount;

```
- count를 보여주기만 하는 컴포넌트 작성
```
// atom 을 읽기만 하는 컴포넌트
import { useRecoilValue } from 'recoil';
import { countState } from '../../recoil/count';

function ReadOnlyCount() {
const count = useRecoilValue(countState); // 구독하는 atom 의 값만 반환

return (

 

읽기 전용 컴포넌트

 

카운트 {count}

);
}

export default ReadOnlyCount;
```