[Recoil] 리코일의 기본 개념 (2) - useRecoilValue, useSetRecoilState

저번 글에 이어 리코일의 또 다른 개념에 대해 알아보도록 하겠다.

[Recoil] 리코일의 기본 개념 (1) - RecoilRoot, atom, useRecoilState

저번 글에서는 상태를 불러오고 변경하기 위해 useRecoilState를 사용했다. 이번에는 상태를 불러오기만을 위한 개념, 상태를 변경하기만을 위한 개념에 대해 알아보도록 하겠다.

---

useRecoilValue

useRecoilValue는 컴포넌트에서 업데이트 함수는 필요 없고 상태 값만 필요할 경우에 사용한다. 저번 글에서 소개했던 코드를 조금 변형시켜보자.

// Test.jsx

import React from "react";
import { atom, useRecoilValue } from "recoil";
import TestDetail from "./TestDetail";

export const countState = atom({
  key: "countState",
  default: 0,
});

const Test = () => {
//count를 변경하는 함수는 이 컴포넌트에 없으므로 useRecoilValue만 불러와도 된다.
  const count = useRecoilValue(countState); 

  return (
    <div>
      <div>{count}</div>
      <TestDetail />
    </div>
  );
};

export default Test;

count를 1 더하고 빼는 함수 및 버튼을 TestDetail 컴포넌트로 분리해서 나타냈다. 따라서 Test.jsx에서는 상태값을 업데이트할 필요가 없으므로 이럴 경우에는 useRecoilValue를 사용할 수 있다.

---

useSetRecoilState

useSetRecoilState는 상태값은 필요 없지만 업데이트 함수만 필요한 경우에 사용한다. 이제 TestDetail 컴포넌트를 살펴보자.

// TestDetail.jsx

import React from "react";
import { useSetRecoilState } from "recoil";
import { countState } from "./Test";

const TestDetail = () => {
  const setCount = useSetRecoilState(countState);
  const addCount = () => {
    setCount((prev) => prev + 1);
  };

  const minusCount = () => {
    setCount((prev) => prev - 1);
  };
  return (
    <div>
      <button onClick={addCount}>ADD</button>
      <button onClick={minusCount}>MINUS</button>
    </div>
  );
};

export default TestDetail;

이 컴포넌트에는 버튼으로만 구성되어 있으므로 count를 불러올 필요가 없다. 따라서 useSetRecoilState를 사용할 수 있다. 실행 결과는 저번 글과 동일하다.