[ReactNative]상태관리 라이브러리 Recoil

01 개요

본 문서에서는 상태관리 라이브러리인 Recoil을 적용하기 위한 내용 전반에 대해서 다룬다.
Recoil은 contextAPI를 기반으로 구현된, 함수형 컴포넌트에서만 사용 가능한 라이브러리이다.

context를 이용하면, 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있다. 즉, context는 React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법이다. 그러한 데이터로는 현재 로그인한 유저, 테마, 선호하는 언어 등이 있다.

이러한 기능에도 불구하고 Recoil이 사용되는 이유는, 투박하게 말하자면 contextAPI에서는 정보를 제공하는 객체가 변경되었을 때 하나의 속성만 변해도 연관된 트리구조의 모든 하위 객체들에서 불필요한 리렌더링이 발생하는데, recoil에서는 atoms라고 하는 단위에 대해서 공유를 사용하고 있는 객체들만 리렌더링 된다는 장점이 있다.

최종수정일 : 2023.09.06

---

02 주요개념

02.01 Atoms

const fontSizeState = atom({
	key: 'fontSizeState',
	default: 14,
});

• 업데이트와 구독의 단위
• unique key와 default 값을 가진다.

02.02 Selectors

const fontSizeLabelState = selector({
	key: 'fontSizeLabelState',
	get: ({get}) => {
		const fontSize = get(fontSizeState);
		const unit = 'px'

		return `${fontSize}${unit}`;
	}
});

• state로부터 파생되는 데이터를 포함
• state의 중복 등을 제거하고, 관리해야 할 상태(atom)를 최소화한다.