Recoil : 시작하기

다음의 공식문서를 공부하며 작성한 내용입니다.

https://recoiljs.org/docs/introduction/getting-started/

[Getting Started | Recoil

Create React App

recoiljs.org](https://recoiljs.org/docs/introduction/getting-started/)

1. 프로젝트 생성

npx create-react-app recoil-docs
cd recoil-docs

2. recoil 패키지 설치

npm install recoil

3. RecoilRoot

• recoil state 사용할 컴포넌트의 상위를 Recoil Root로 감쌈
• 모든 곳에서 recoil state 사용하기 위해 root 컴포넌트의 상위를 Recoil Root로 감쌈

//App.js
import React from "react";
import { RecoilRoot } from "recoil";

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

export default App;

(여기서는 CharacterCounter 컴포넌트가 recoil state 사용함)

4. Atom

• state의 단위
• 해당 Atom의 state를 구독하는 컴포넌트에 의해 read와 write 가능
• Atom의 state가 update된 경우, 해당 atom를 구독하는 컴포넌트는 모두 업데이트된 결과에 따라 re-render됨에 따라 동일한 상태 공유함
• key : unique ID / 다른 atom, selector와 구별
• default : intial value

//atom.js
import { atom } from "recoil";

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

recoil state 구독하는 CharacterCounter 컴포넌트 생성

/CharacterCounter 폴더 내 관련 컴포넌트 생성

/CharacterCounter/index.js
import TextInput from "./textInput";
import CharacterCount from "./characterCount";

const CharacterCounter = () => {
  return (
    <>
      <TextInput />
      <CharacterCount />
    </>
  );
};

export default CharacterCounter;

/CharacterCounter/characterCount.js
const CharacterCount = () => {};

export default CharacterCount;

/CharacterCounter/textInput.js
const TextInput = () => {};

export default TextInput;

5. useRecoilState 사용해 atom의 state를 get과 set하기

• useRecoilState의 인자로 구독할 atom을 입력
• useRecoilState hook은 해당 atom을 get과 set하는 것을 반환함

예시

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

• textState이라는 atom 구독
• text : textState인 atom의 state를 get
• setText : textState인 atom의 state를 set

/CharacterCounter/textInput.js
import { useRecoilState } from "recoil";
import { textState } from "../atom";

const TextInput = () => {
  const [text, setText] = useRecoilState(textState);
  const _handleTextInput = (e) => {
    setText(e.target.value);
  };
  return (
    <>
      <input type="text" value={text} onChange={_handleTextInput} />
      <br />
      Echo: {text}
    </>
  );
};

export default TextInput;

만약 get과 set 중 한개만 필요한 경우

• useRecoilValue를 통해 atom의 state를 get
• useSetRecoilState을 통해 atom의 state를 set

6. select 사용해 atom의 state의 파생된 상태(derived state) 사용

• get 프로퍼티 사용해 atom의 state에서 파생하여 변형한 것을 반환

/selector.js
import { selector } from "recoil";
import { textState } from "./atom";

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

charCountState : textState atom의 상태에서 파생된 state를 생성함
charCountState의 get 프로퍼티 : textState atom의 상태를 get하고 이를 text 변수에 대입하고 text 변수의 길이 반환함

컴포넌트에서 select (파생된 상태) 사용하기

/CharacterCounter/characterCount.js
import { charCountState } from "../selector";
import { useRecoilState } from "recoil";

const CharacterCount = () => {
  const count = useRecoilState(charCountState);
  return <div> Character Count : {count}</div>;
};

export default CharacterCount;