[React Native] Recoil

: React를 위한 상태관리 라이브러리

⭐ 설치

npm

> npm install recoil

yarn

> yarn add recoil

⭐ 사용

💫 RecoilRoot 배치

• RecoilRoot를 넣기에 가장 좋은 장소는 루트 컴포넌트(ex. App.js)이다.

import { RecoilRoot } from 'recoil';

export default function App() {
    return (
        <RecoilRoot>
          <Component {...pageProps} />
        </RecoilRoot>
    );
}

💫 State 정의

(1) Atom 설정

: 상태(state)의 일부를 나타냄
: Atom들은 어떤 컴포넌트에서나 읽고 쓸 수 있음

import { atom } from 'recoil';

export const textState = atom({
  key: 'textState', // unique ID
  default: '', // default value (initial value)
});

(2) Selector 설정

: 다른 state로부터 파생된 상태

import { selector } from 'recoil';

export const charCountState = selector({
  key: 'charCountState', // unique ID
  get: ({get}) => {
    const text = get(textState);

    return text.length; // textState의 length -> charCountState
  },
});

💫 State 사용

(1) 읽고 쓰기

useRecoilState() 사용
react의 useState와 동일한 기능

export default function Component() {
	const [text, setText] = useRecoilState(textState);
}

(2) 읽기

useRecoilValue 사용

export default function Component() {
	const text = useRecoilValue(textState);
}

(3) 쓰기

useSetRecoilState() 사용

export default function Component() {
	const setText = useSetRecoilState(textState);
}

(4) 기본값으로 초기화

useResetRecoilState() 사용

export default function Component() {
	const resetText = useResetRecoilState(textState);
  	return <button onClick={resetText}>텍스트 초기화</button>
}