[React] Recoil(1)

• Recoil 공식문서를 참고하였습니다.

RecoilRoot

부모트리에 RecoilRoot가 필요, 루트 컴포넌트가 가장 최적이다.

import React from 'react';
import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from 'recoil';

function App() {
  return (
    <RecoilRoot>
      <CharacterCounter />
    </RecoilRoot>
  );
}

---

Atom

• Atom은 상태 state의 일부를 나타낸다. (이름부터 atom..)
• Atom은 어느 컴포넌트에서나 읽고 쓸 수 있다.
• Atom의 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독한다고 볼 수 있다.
• 때문에 그 atom에 변화가 발생하면 그 atom을 구독하는 모든 컴포넌트가 재렌더링된다.
• atom은 유니크한 id인 key로 구분된다.

atom 생성

• key와 defualt 속성은 필수로 선언해야한다.
• 객체, 배열과 같은 복잡한 타입도 atom으로 사용 가능하다.
• atom을 설정할 때, Promise를 지정할 수 없다. 비동기 함수 쓰려면 selector()를 사용한다.

const textState = atom({
  key: 'textState', // unique ID (with respect to other atoms/selectors)
  default: '', // default value (aka initial value)
});

atom읽고 쓰기- useRecoilState()

function CharacterCounter() {
  return (
    <div>
      <TextInput />
      <CharacterCount />
    </div>
  );
}

function TextInput() {
  const [text, setText] = useRecoilState(textState);

  const onChange = (event) => {
    setText(event.target.value);
  };

  return (
    <div>
      <input type="text" value={text} onChange={onChange} />
      <br />
      Echo: {text}
    </div>
  );
}

위에서 선언한 textState를 구독하여 사용한다.

다른 Hooks - 전역 상태와 관련해서

전역상태 (atoms, selector)를 get/set 하기 위해서 Recoil에서 제공하는 훅들을 사용한다.
크게 다음 4가지가 사용된다.

• useRecoilState()
  가장 기본적인 형태, useState()와 비슷하다.

• useRecoilValue()
  전역 상태의 state 상태 값만을 반환한다.

• useSetRecoilState()
  전역 상태의 setter 함수만을 반환한다.

• useResetRecoilState()
  전역 상태를 default(초기값)으로 리셋하기 위해서 사용한다. reset한 default값이 반환된다.

---

Selector

• Selector는 파생된 상태(derived state)의 일부를 나타낸다.
• 파생된 상태란 상태의 변화를 말한다.
• 파생된 상태를 어떤 방법으로든 주어진 상태를 수정하는 순수함수에 전달된 상태의 결과물로 생각할 수 있다.

const charCountState = selector({
	key: 'charCountState',
    get: ({get}) => {
    	const text = get(textState);
        
        return text.length;
    },
});

그러면 이후에 useRecoilValue() 훅을 사용하여 charCountState 값을 읽을 수 있다.

fucntion CharactorCount(){
	const count = useRecoilValue(charCountState);
    
    return <React.Fragment>CHARACTOR cOUNT:{count}</React.Fragment>