안녕 recoil...

전해림·2024년 3월 20일

상태관리 라이브러리인 Recoil이 업데이트를 중단했다... 한참 전 부터 기질이 있긴 했지만 정말 중단되며 나는 큰 고민에 빠졌다. atom에 익숙해져있던 나는 Redux를 쓰기에는 배우는데 시간이 꽤 걸릴것 같아 고민을 하던중 atom 기반의 Jotai를 발견하게 되었다!
Jotai에 대해 알아보기 전 친구는 나에게 물었다.

🤷🏻‍♀️ : 라이브러리가 업데이트 중단 됐다고 해도 걍 쓰면 되는거 아님? 왜 바꿈?
나 : 엄.... 그러게...

그래서 알아보았다 업데이트 중단된 라이브러리를 쓰면 안되는이유

보안
개발자들은 보안 취약점이 발견될 때마다 라이브러리 업데이트를 통해 이를 수정하는데 더 이상 업데이트가 되지 않는다면 라이브러리는 취약점에 대한 보안 패치를 받지 못한다. 이는 시스템 또는 어플에 보안 위험을 초래할 수 있다.
지원종료
더 이상 업데이트되지 않는 라이브러리의 개발자가 지원을 중단한다면 멀쩡히 살아있던 내 프로젝트가 한순간에 띡- 하고 오류를 내뱉을 수 있다. 만약 프로젝트 규모가 크고 사용자가 많은 서비스라면....? 더 이상 알아보지 않겠다..
호환성
새로운 버전의 언어나 다른 의존성 라이브러리의 업데이트에 따라 이전 버전의 라이브러리가 호환성 문제를 일으킬 수 있다. 이로 인해 어플이 예기치 않게 동작하거나 오류가 발생할 수 있다

Jotai에 대해 알아보자

Jotai는 2020년 Pedro Nauck에 의해 처음 소개된 React를 위한 상태 관리 라이브러리로, Redux나 Modx와 같은 다른 인기있는 상태 관리 라이브러리의 대안으로 등장하게 되었다. Jotai의 주요 아이디어는 최소한의 API를 제공하여 React에서 상태 관리를 간단하게 만드는 것이다.

Jotai의 사용법을 알아보기 전 Redux..Modx와 같은 상태관리에 대한 접근 방식을 알아보겠다

1. 상태관리, Flux vs Atomic

Flux (Redux, Zusstand)

Proxy (Mobx, Valtio)

Atomic (Jotai, Recoil)

Flux
일반적으로 많이 쓰는 Flux 패턴인 리덕스를 보면 액션을 통해 앱 상태를 변화시키고, 컴포넌트는 selector를 사용해 전역 상태의 일부를 subscribing 하는 형태로 동작한다. 리덕스 환경에서 stor에 있는 값을 변경하기 위해서는 액션 함수를 실행하고 특정 액션 타입을 리듀서에 전달하는 방식으로 변화를 전달해야 한다. 그러다보니 보일러플레이트가 아주 많고 데이터를 변화시키기 위해 작성해야 하는 코드 양도 많다.

Proxy
Mobx에서는 전체 상태에 대한 엑세스를 제공하고, 컴포넌트에서 사용되는 일부 상태를 자동으로 감지하고 업데이트만 인지해서 사용한다. 리덕스보다 디버깅은 어렵지만 store에 있는 데이터를 바로 변경할 수 있는 Mobx가 더 편하게 느껴질 때도 많을것을다.

Atomic
Jotai와 recoil 같은 Atomic 접근 방식은 React애서 사용되는 state와 비슷하게 리액트 트리안에서 상태를 저장하고 관리하는 방법이다.

Jotai를 사용해보자

import {atom} from "jotai"

const countAtom = atom(0)
const mangaAtom = atom({'label': '', 'content':''});

const [value, setValue] = useAtom(countAtom)

이런식으로 Jotai를 사용하면되는데 기존의 Recoil 방식은 key와 디폴트값을 정해서 코드를 선언해놓는 반면 Jotai는 한줄로 선언이 가능하다. ~~recoil보다 편한데..?~~

import {useAtom} from "jotai"

function Counter(){
  const [count, setcount] = useAtom(countAtom);
  
  function increment(){
    setCount((c) => c + 1);
  }
  
  return(
   <div>
     <p>Count : {count}</p>
     <button onClick={increment}>Imcrement</button>
   </div>
  );
}

간단하게 Counter 컴포넌트를 만들어보았다. useAtom 훅을 사용하여 상태에 접근하고, setCount 함수를 사용해서 상태를 업데이트한다. setCount 함수가 호출될 때마다 counterAtom을 사용하는 모든 컴포넌트가 리랜더링된다.

Jotai 장점

Jotai는 React에서 상태를 간단하게 관리할 수 있도록 해주는 최소한의 API를 제공한다. 따라서 Redux와 같은 다른 상태 관리 라이브러리보다 더 가볍고 간단하게 사용할 수 있다.
Atom은 여러 컴포넌트에서 사용할 수 있으므로, Redux와 같이 중앙 집중식 저장소에 모든 상태를 보관하는 것보다 더 유여한게 상태를 관리할 수 있다.