지금까지 저는 리콜에 대해 이야기했습니다.

개시하다

Recoil은 이렇게 썼어요.useState와 무엇이 다릅니까?이런 부분을 이 기사에서 잡아낸다면 영광입니다.
잘못된 점이 있으면 메시지를 남겨 주세요.

이른바 Recoil

Recoil은 FaceBook사(현재 META사)가 개발한 상태 관리 라이브러리다.
배경은 Context API의 제약 및 문제를 해결하기 위한 것입니다.

Recoil 주요 기능

Recoil Root은 무엇입니까?

Recoil Root은 Recoil을 사용하기 위해 정의된 것이며 추천하는 설정 장소는 루트 구성 요소입니다.
이것을 정의하면 해당 아이의 어셈블리에서 Recoil을 사용할 수 있습니다.

import { RecoilRoot } from "recoil"
import { Components } from "./components" 

function App() 
  return (
    <RecoilRoot>
      <Components />
    </RecoilRoot>
  );
} 

아톰이란?

간단하게 말하면 Atom은 상태의 단위이다
useState와 같은 값이 바뀌면 구성 요소가 다시 나타납니다.
키는 유일해야 합니다.default에 초기 값을 저장합니다

// 例 名前を入力するようなフォームの場合
export const nameState = atom<string>({
  key: "nameState"
  default: "" 
})
// 例　数字を持つ場合
export const countState = atom<number>({
  key: "countState"
  default: 0
})

셀렉터가 뭐예요?

Selector는 Atom 값의 가공 값을 반환하거나 state 값을 다시 반환할 수 있습니다.
이것은 Atom과 마찬가지로 키는 반드시 하위 부호여야 한다.

import { selector } from "recoil"
import { countState } from "./Atom.ts"
 
export const countSelector = selector({
  key: "countSelector"
  get: ({ get }) => {
    // 定義したatomの値をgetで呼び出す
    const count = get(countState)
    return count + 1
  }
});  

useRecoilState는 무엇입니까?

useRecoilState는Atom의 값을 얻어 업데이트할 수 있는 hooks입니다. useState와 마찬가지로 첫 번째 요소는 상태 값이고 두 번째 요소는 set 함수로 상태 값을 업데이트할 수 있습니다.

import { useRecoilState } from "recoil"
import { CountState } from "./Atom.ts"

export const ComponentA = () => {
  const [count, setCount ] = useRecoilState(CountState)
  // useRecoilStateを使ってatomを呼び出す

  const onClick = () => {
    setCount(count + 1)
 }

    return (
      <button onClick={onClick}>
        カウント
　　　 </button>
    )
}

useSetRecoilState는 무엇입니까?

useSetRecoilState는 간단하게 set 함수만 실행하는 함수입니다.
상황에 따라 구분해서 사용하려면 예를 들어 이component에서 값을 얻기 싫고 값만 바꾸려고 하는 등 활발하게 활동할 수 있다.

const setName = useSetRecoilState(nameState)

const changeName = (e: React.ChangeEvent<HTMLInput>) => {
   setName(e.target.value);
 };

return <input onChange={onChangeName} placeholder="名前" /> 

useRecoil Value는 무엇입니까?

useRecoilValue는useSetRecoilState와 달리 값만 호출하는 함수입니다
변경된 tom의 값, selector 가공의 값을 호출할 때 주로 사용합니다.
selector 가공 예로 입력한 문자 수를 사용하고component로 참조할 때

export const nameState= atom<string>({
  key: "nameState",
  default: ""
});

export const textLengthSelector = selector({
  key: "textLengthSelector",
  get: ({ get }) => {
  
  const text = get(nameState)
  return text.length
})   

const textCount = useRecoilValue(textLengthSelector)

return <div>入力した文字数は{textCount}</div>

useResetRecoilState는 무엇입니까?

useResetRecoilState는 뇌사에 다음 코드를 적은 것처럼 상태를 기본값으로 복원하는 함수입니다.
before

const [name, setName] = useRecoilState(nameState)

const resetButton = () => {
  setName("")
}

return  <button onClick={resetNameState}>リセット</button>

이렇게 리셋 단추를 누르면form의 값을 리셋하는 처리가 있으면 set 함수를 사용하여 상기 코드로 실행하면 쓸모없는 재현이 발생합니다.그러나useResetRecoilState를 사용하면 쓸데없는 렌더링이 일어나지 않습니다.
after

const [name, setName] = useRecoilState(nameState)

const resetNameState = useResetRecoilState(nameState)

return <button onClick={resetNameState}>リセット</button>

최후

여기까지 읽어주셔서 감사합니다.
'컨디션 관리가 이런 거구나'이런 느낌으로 읽게 되면 영광인 것 같아요.