Recoil Getting Starting

React 상태관리 라이브러리

상태(State)

 React에서 상태(State)는 컴포넌트 안에서 동적으로 변할 수 있는 데이터를 의미한다. 변수, 객체, 함수 등 이런 것들이 상태가 된다.

예를 들어, 함수 같은 경우에는 사용자가 버튼을 클릭할 때마다 하나의 변수인 숫자를 증가시키는 기능이 담겨있는 함수가 있다면 그 함수는 상태가 된다.

 

상태관리 이유

 작은 애플리케이션에서는 컴포넌트 내부에서 상태를 관리하는 것은 간단하다. 대표적으로 useState가 있다. 하지만 애플리케이션이 커지고 여러 컴포넌트가 상호작용할 때, 상태 관리는 점점 복잡해집니다. 모든 컴포넌트에 useState를 사용할 수도 없고 props로 전달하는 것에도 한계가 있기 때문이다.

 예를 들어, 사용자 정보에 대한 데이터가 담겨있는 상태(state)가 있다. 이 사용자에 대한 정보가 필요한 컴포넌트가 회원가입, 로그인 등 사용자 인증 컴포넌트와 자기 정보들을 볼 수 있는 마이페이지 컴포넌트가 있다고 해보자. 이 두 컴포넌트는 다른 페이지로 분류되는 컴포넌트인데 굳이 둘 중 하나의 컴포넌트에 useState를 사용하여 사용자 정보의 상태를 초기화하여 나머지 하나의 컴포넌트에 props로 전달할 이유가 없다.(Props Drilling 방지) 아니면 두 컴포넌트에 각자 useState를 사용하면 되지 않냐 라고 하면 결국 컴포넌트들이 이루어 하나의 프로젝트가 되는데 프로젝트가 수정되어 최신화 할 때마다 각 컴포넌트의 상태들이 독립적이게 되면 프로젝트가 꼬이면서 혼란이 생길 수 있다.

 따라서 상태를 관리하는 라이브러리를 사용하여 모든 컴포넌트들이 최신 상태를 쉽게 공유하고 업데이트할 수 있도록 하기 위해 사용한다. 결국 상태관리 라이브러리를 사용함으로써 일관된 데이터 관리가 되며 코드도 간소화된다. 그리고 여러 컴포넌트를 수정하는 대신 중앙 상태 관리 코드만 수정하면 되기 때문에 유지보수도 용이해진다.

상태관리 라이브러리 - Redux, MobX, Recoil, etc...

 

👁️‍🗨️ Recoil

Recoil 설치

npm install recoil

npm i recoil

Atom

Recoil에서의 상태(State) 단위
atom을 통해 상태를 저장하면 어떤 컴포넌트에서나 읽고 쓸 수 있다.
→ atom의 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독 (atom을 import하여 atom의 상태를 불러옴)
atom을 구독하는 모든 컴포넌트는 atom의 상태가 최신화 될 때마다 재 렌더링되는 결과가 발생한다.
atom의 상태를 사용 (읽기, 수정(쓰기))하기 위해서 useRecoilState() 사용

// app.ts
import React from 'react';
import {
  RecoilRoot,
  atom,
  selector,
  useRecoilState,
  useRecoilValue,
} from 'recoil';

const App: React.FC = () => {
  return (
    <RecoilRoot>
      <CharacterCounter />
    </RecoilRoot>
  );
};

export default App;

// src/atoms/textAtom.ts
import { atom } from 'recoil';

export const textState = atom<string>({
  key: 'textState', // key값
  default: '', // 기본 세팅(초기화된)값
});

// ./CharacterCounter.tsx
import React from 'react';
import TextInput from './TextInput';
import CharacterCount from './CharacterCount';

const CharacterCounter: React.FC = () => {
  return (
    <div>
      <TextInput />
      <CharacterCount />
    </div>
  );
};

export default CharacterCounter;

// ./TextInput.tsx
import React, { ChangeEvent } from 'react';
import { useRecoilState } from 'recoil';
import { textState } from './atoms/textAtom';
const TextInput: React.FC = () => {
  const [text, setText] = useRecoilState(textState);

  const onChange = (event: ChangeEvent<HTMLInputElement>) => {
    setText(event.target.value);
  };

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

export default TextInput;

Selector

파생된 상태(derived state) : 상태의 변화
즉, 파생된 상태를 어떤 방법으로든 주어진 상태를 수정하는 순수 함수에 전달된 상태의 결과물
→ 상태를 수정, 가공등을 하는 return값이 존재하는 함수
함수의 값을 불러와 읽기 위해서 useRecoilValue() 사용

// src/atoms/textAtom.ts
...
export const charCountState = selector<number>({
  key: 'charCountState',
  get: ({ get }) => {
    const text = get(textState);
    return text.length;
  },
});

// ./CharacterCount.tsx
import React from 'react';
import { useRecoilValue } from 'recoil';
import { charCountState } from './atoms/textAtom';

const CharacterCount: React.FC = () => {
  const count = useRecoilValue(charCountState);

  return <>Character Count: {count}</>;
};

export default CharacterCount;

useRecoilState() : writable한 상태 → useState처럼 set함수 존재 (수정 즉, setting이 가능하기 때문)
useRecoilValue : read only 상태 → 변수, 상수에 초기화 하여 불러오기만 가능 (따라서 return값이 있는 함수에 주로 사용)