[이론] Recoil에 대해

조민수·2024년 12월 26일

React 이론

개발 이론

목록 보기

13/13

Recoil은 React에서의 상태 관리 라이브러리 중 하나이다.

전역 상태 관리를 위한 다양한 라이브러리(React-redux, MobX, zustand)를 사용하는데, 그 중 하나이다.

Atomic. 즉, 원자성을 가진 상태관리 라이브러리로서 비교적 가벼운 러닝 커브와 사용성이 장점이다.

Recoil이란?

공식문서에서 Recoil은 "가장 React스러운" 이라는 점을 강조하고 있다.

React를 만든 Facebook에서 만든 것이라는 데에 그 연결성을 갖고 있고,
React의 주요 철학인 선언적 UI, Component-based 설계, Hooks 사용 방식을 기반으로 한다.

상태 관리란?

React에서 상태 관리는 UI의 업데이트를 가져오는 데이터를 의미한다.

어떤 상태가 어떻게 바뀌고, 이에 따라 어떤 컴포넌트들이 rerender될 것인지를 효율적으로 관리하는 것.

Recoil 주요 개념

RecoilRoot

애플리케이션 최상단에 위치하는 컴포넌트로, Recoil 상태를 정의 및 사용할 수 있게 하는 기본 베이스이다.

Atom

Recoil에서의 가장 기본적인 상태 단위(데이터)
전역으로 공유되는 상태이며, useRecoilState 훅을 통해 읽고 쓸 수 있다.
atom을 구독하는 컴포넌트는 변경이 일어날 경우, 해당 컴포넌트만 리렌더링한다.

Selector

Atom 상태를 기반으로 파생된 데이터를 만들어내는 함수.
useRecoilValue 등을 통해 Selector를 구독하며,
비동기 Selector 역시 지원한다.

Recoil 주요 훅

useRecoilState

const [value, setValue] = useRecoilState(value);

읽기/쓰기 모두 가능

useRecoilValue

const value = useRecoilValue(value);

읽기 전용으로 상태 가져옴

useSetRecoilState

const value = useSetRecoilState(value);

쓰기 가능한 Selector에 대한 setter 함수
값을 직접 읽지 않고, 설정 및 업데이트만 해줄 때 필요

useRecoilValueLoadable

const data = useRecoilValueLoadable(dataQuery);

if(data.state === 'loading') return ...
if(data.state === 'hasError') return ...
return <CallComponent val={data} />

비동기 로직을 처리하는 Selector에 대해 결과를 핸들링할 때 사용

Recoil 장점

1. 손쉬운 전역 상태 관리

Recoil의 상태 구독 및 업데이트는 Redux에 비해 간단하고 안정적
Atom은 모든 컴포넌트에서 접근 가능한 그래프의 노드

2. 단방향 데이터 흐름

Redux와 마찬가지로, Flux패턴에 기반한 단방향 데이터 흐름을 갖는다.
기존 React 및 Redux 사용자들에게는 쉽게 접근 가능한 방인이 되는 것.

3. 간단한 API, 적은 보일러플레이트

Redux에 비해 Action, Reducer, Middleware 등의 기초 설정 단계가 없어 직관적이고 간단한 전역 상태 구성 가능

4. Props Drilling 해결

모든 상태 관리 라이브러리의 장점으로, 자식 컴포넌트로 지속해서 props를 전달하며 발생하는 단점인 props drilling을 해결할 수 있다.

Recoil 한계

2024년 기준, 전역 상태 관리 라이브러리로 Recoil을 사용하는 개발자들이 점점 더 이탈하고 있다.

이는 당연히 커뮤니티의 약화로 이어진다.

이유로는 새로운 버전의 릴리즈 주기가 느리고, 메모리 누수가 발생한다는 점이 있다.
또한 공식 문서에서 SSR을 지원한다는 점이 없어 SSR환경에선
사용하기 어려운 라이브러리로 인식이 잡혀가고 있다.

React의 경우, 최근 RSC. 즉, 리액트-서버-컴포넌트를 지원하는 만큼 SSR 및 서버 자원의 효과적인 사용을 지향하는데,
Recoil은 이런 점에서 아쉬움이 발생할 수 밖에 없는 것.

마치며...

여전히 소규모, 가벼운 목적의 프론트엔드에선 Recoil의 장점이 있다고 생각한다.

오히려 Redux의 높은 러닝 커브를 마주하기 전에 Recoil을 하나의 학습 도구로서 활용하는 것 또한 매우 찬성하는 바이다.

그러나, 당연하게도 모든 프로젝트에서 목적과 성격에 맞는 기술 스택을 도입하는 것이 적절하기 때문에
어떤 상태관리 라이브러리를 적용할 것인지에 대해 깊게 생각해봐야한다.

[참고자료]

조민수

사람을 좋아하는 Front-End 개발자

이전 포스트