React에서는 자식컴포넌트에서 부모컴포넌트의 state를 바꿀 수 있는 방법은 2가지가 있다.
- 부모컴포넌트로부터 setState함수를 받아온다.
- state management tool을 이용한다(redux, recoil)
1번과 같은 방법을 사용하면 부모와 자식의 depth가 길어질수록 props를 계속 전달해야하기 때문에 불편해지는 단점이 있다. 한마디로 비효율적이다.
따라서 depth가 얕은 기본적이 앱이 아니면 2번 방법을 사용하는 것이 좋아보인다.
2번 방법 중에 recoil에 대해 포스팅하고자 한다.
1. 주요개념
Atom
Atoms는 상태의 단위이며, 업데이트와 구독이 가능하다. atom이 업데이트되면 각각의 구독된 컴포넌트는 새로운 값을 반영하여 다시 렌더링 된다. 동일한 atom이 여러 컴포넌트에서 사용되는 경우 모든 컴포넌트는 상태를 공유한다.
const fontSizeState = atom({
key: 'fontSizeState',
default: 14,
});atom의 기본적인 작성법이다.
여기서 key는 atom끼리 분류하기 위해 사용되고, default는 atom에 들어가는 초기값을 지정할 수 있게 한다.
function FontButton() {
const [fontSize, setFontSize] = useRecoilState(fontSizeState);
return (
<button onClick={() => setFontSize((size) => size + 1)} style={{fontSize}}>
Click to Enlarge
</button>
);
}해당 함수는 버튼을 클릭하면 버튼의 글꼴 크기가 1만큼 증가하도록 만든 것인데, fontSizeState atom을 사용하는 다른 컴포넌트의 글꼴 크기도 같이 증가한다.
useRecoilState()
atom 혹은 selector의 값을 읽고 쓰려고 할때 사용한다.
const count = useRecoilValue(countState);
useState()와 비슷한 형태로 생겨서 친근한데 기본값 대신에 recoil의 상태로 인자를 받는 것이 다르다. useState처럼 상태가 업데이트되면 자동적으로 리렌더링된다. key, get, set의 값을 가진다.
import { atom } from "recoil";
export default atom({
key: 'countState',
default: 0,
});import { DefaultValue, selector } from "recoil";
import countState from "../atom/countState";
export default selector({
key: "countSelector",
get: ({get}): number => {
const count = get(countState);
return count + 1;
},
set: ({set, get}, newCount)=>{
return set(countState, newCount + 10)
}
})(1) key
atom의 key와 동일하며 프로젝트 전체에서 고유한 문자열을 가져야한다.
(2) get
get: ({get}): number => {
//countSate를 구독하고 있다.
//countState가 바뀔 때마다 1증가시켜서 반환한다.
const count = get(countState);
return count + 1;
},
```
파생된 상태를 반환하는 곳이다.
get(countState)처럼 countState를 get하고 있으면 countState가 바뀔 때마다 새로운 값을 리턴해준다.
#### (3) set
```javascript
set: ({set, get}, newCount)=>{
// 설명을 위한 코드로,
// 현재 count는 사용하고 있지 않습니다.
const count = get(countState);
return set(countState, newCount + 10)
}set 없이 get만 제공되면 selector는 read-only한 상태지만 set을 사용하면 쓰기 가능한 상태를 반환한다.
set은 selector의 값을 수정하는 것이 아닌 수정 가능한 atom의 값을 바꿔준다.
Selector
Selector는 파생된 상태(derived state)의 일부를 나타낸다.
파생된 상태를 어떤 방법으로든 주어진 상태를 수정하는 순수 함수에 전달된 상태의 결과물로 생각할 수 있다.
useRecoilValue()
Recoil 상태의 값을 반환한다.
상태를 읽을 수만 있게하고 싶을 때 사용한다.const [count, setCount] = useRecoilState(countState);
const increaseCount = () => {
setCount(count + 1);
}
### useSetRecoilState()
>Recoil 상태의 값을 업데이트하기 위한 setter함수를 반환한다.
상태를 읽지 않고 쓰기만 하고 싶을 때 사용한다.
```javascript
const resetCount = useResetRecoilState(countState);
...
<button onClick={resetCount}>reset count</button>Selectors
Selector는 atoms나 다른 selectors를 입력으로 받아들이는 순수 함수다. 상위의 atoms 또는 selectors가 업데이트되면 하위의 selector 함수도 다시 실행된다. 컴포넌트들은 selectors를 atoms처럼 구독할 수 있으며 selectors가 변경되면 컴포넌트들도 다시 렌더링된다.
