Recoil 정리 2편 - Recoil 활용하기 (useRecoilState, useRecoilValue...)

이전 글에서 Recoil의 기초와 atom, selector에 대해 살펴보았습니다.

https://talkwithcode.tistory.com/75

Recoil 정리 1편 - Recoil시작하기 (atom, selector)

 

이번 시간에는 선언한 atom과 selector를 어떤 식으로 활용할 수 있는지 알아보겠습니다.

 

아래 hook들을 설명하고 있습니다.

1. useRecoilState
2. useRecoilValue
3. useSetRecoilState
4. useResetRecoilState

 

 

useRecoilState

---

atom 혹은 selector의 값을 읽고 쓰려고 할 때 사용합니다.

useState() 와 비슷한 형태로 생겼습니다. 다만 기본값 대신 recoil의 상태로 인자를 받습니다.

상태가 업데이트되면 자동적으로 리렌더링 일어납니다.

// useRecoilState
const [count, setCount] = useRecoilState(countState);

const increaseCount = () => {
	setCount(count + 1);
}

사용법은 [get, set]으로 useState와 동일합니다.

 

* selector의 경우 set을 설정해 주지 않았다면 사용하지 못합니다.

set을 설정해야만 쓰기 가능한 상태로 바뀌기 때문입니다. 그전까지는 읽기 전용 상태입니다.

 

 

 

useRecoilValue, useSetRecoilState

---

useRecoilState의 기능을 반으로 분리할 수 있습니다.

• useRecoilValue

const count = useRecoilValue(countState);

Recoil 상태의 값을 반환합니다. 

이 hook 은 상태를 읽을 수만 있게 하고 싶을 때 사용하는 것을 추천합니다.

 

 

• useSetRecoilState

const setCount = useSetRecoilState(countState);

Recoil 상태의 값을 업데이트하기 위한 setter 함수를 반환합니다.

이 hook 은 상태를 읽지 않고 쓰기만 하고 싶을 때 추천합니다.

 

 

useResetRecoilState

---

atom이나 selector의 값을 초기화하고 싶을 때 사용합니다.

const resetCount = useResetRecoilState(countState);
...
<button onClick={resetCount}>reset count</button>

 

 

atom의 경우 위 코드처럼 초기화할 수 있습니다.

 

 

* 하지만 selector의 경우 다릅니다.

// sumCountSelector.ts
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:any)=>{
        return set(
            countState,
            newCount instanceof DefaultValue?newCount:newCount+10,
        )
    }
})

// handleCount.tsx
const resetSumCount = useResetRecoilState(sumCountSelector);
...
<button onClick={resetSumCount}>reset count</button>

useResetRecoilState로 selector를 초기화 시킬 경우 set은 DefaultValue 객체를 매개변수로 전달받습니다.

따라서 selector에서 set을 사용할 때 조건 처리를 해주어야 합니다.

 

위 코드에서는 일반적으로 set을 할 경우 받아온 카운트에 10을 더해서 반환하지만,

DefaultValue가 오게 되면 초깃값을 반환합니다.

 

 

 

 

지금까지 atom과 selector를 사용하기 위한 기본적인 방법을 정리했습니다.

다음 글에서는 비동기 통신하는 방법에 대해 깊이 있게 알아보겠습니다.

 

 

참고 : https://recoiljs.org/ko/