리코일은 "신"이고, 리액트 개발자는 "무적"이다

페이스북에서 제작한 전역 상태 관리 라이브러리, recoil.js가 점점 많이 언급되는 것 같아 공식 문서를 살짝 따라가봤습니다.

https://recoiljs.org/ko/

따라가다 보니... 헨젤과 그레텔이 과자에 홀린 것처럼 계속 읽게 되었네요.

결론부터 말씀드리면 리코일은 리덕스를 대체할 수 있는 가뭄의 단비같은 라이브러리입니다.

 

그동안 리액트로 프로젝트를 진행하려 하면 솔직히 리덕스 로직을 작성하기 시작하는게 부담이 되어 컨텍스트 API를 사용하려 하곤 했는데요, 리코일을 사용하면 전역 상태 관리에 대한 부담을 덜 수 있을 것 같다는 희망을 볼 수 있었습니다!

 

리코일로 간단히 투두앱을 만들어본 후, 리덕스와 비교했을 때 제가 느낀 장점들을 나열해보도록 하겠습니다.

---

장점

• 리액트 기본 훅과 사용 방법이 매우 유사함
• 조금 더 자세히 소개하자면, 리덕스는 언제나 리듀서라는 순수 함수를 생성하고 액션 객체를 디스패치하는 방법으로 리듀서를 호출하는 복잡한 과정을 거쳤지만, 리코일은 아래 코드가 전부입니다.

import { atom } from "recoil";
// 리코일에서는 전역 상태를 "아톰" 이라는 이름으로 부른다.
// 입력된 텍스트를 전역으로 관리할 textState라는 아톰을 생성했다.

export const textState = atom({ key: "textState", default: "" });

import React from "react";
import { useRecoilState } from "recoil";
import { textState } from "./store/textStore";

const CharacterCounter = () => {
  // text는 단순한 컴포넌트의 상태가 아닌, 리코일이 전역으로 관리하는 상태(아톰) 입니다.
  const [text, setText] = useRecoilState(textState);
  
  const onInputChange = (e) => {
    setText(e.target.value);
  }
  
  return (
    <div>
      <input type="text" value={text} onChange={onInputChange} />
      <br />
      <p>입력한 텍스트 : {text}</p>
    </div>
  );
};

export default CharacterCounter;​

보다시피 아톰을 관리하는 스토어 역할의 코드와 useState 훅 대신 useRecoilState 훅을 사용하는 것을 제외하면, UI 컴포넌트의 모습은 useState 훅을 사용할 때와 완벽하게 동일합니다. (= 쉽습니다.)

---

• 새로운 학습에 대한 부담이 줄어듬

리덕스는 리액트 진입장벽을 크게 높이는 주범중 하나라고 생각하는데, 제일 큰 원인은 학습해야 하는 낯선 개념이 너무나도 많다는 것입니다.

(이는 리덕스의 문법 자체가 거대한 백그라운드 스토어 안에서 상태를 관리하고, 리듀서를 통해 스토어를 관리하는 방법에 초점이 잡혀있기 때문이라고 생각합니다.)

 

따라서 새로 배우는 입장에서는 리듀서와 셀렉터를 통해 간접적으로 상태를 읽고 쓰는 방식이 꽤나 난해하게 느껴질 수밖에 없는데, 리코일은 스토어를 조작하는 것이 아닌 상태를 조작하는 것에 초점을 맞췄다고 느껴졌습니다.

 

[리덕스와 리코일에서 투두앱에 태스크를 추가하는 로직 예시]

// 1. 리덕스의 리듀서
const todos = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          id: action.id,
          text: action.text,
        }
      ]
    default:
      return state
  }
}

// 2. 리코일의 훅
const [todos, setTodos] = useRecoilState(todoState);

// 할일을 목록에 추가하는 AddTodo 로직 구현
setTodos([...todos, {id: "1", text: "새로운 할일!"});

조금 대충 짠 코드긴 하지만, 리코일은 정말 이렇게 동작합니다.

리덕스가 리듀서를 통해 상태값을 어떻게 조작할지 정의한다면, 리코일은 그냥 일반적인 컴포넌트에서 하던 대로 하면 됩니다!

 

그래도 정말 디테일한 동작(요청 도중에 새로운 요청을 보내면 기존 요청을 취소한다던지 등...)을 구현하기 위해서는 리덕스 사가같은 도구가 더 적합할 수도 있겠지만, 한 가지 확신할 수 있는건 리코일은 리덕스보다 훨씬 쉽다고 느껴졌습니다. 그것도 무지무지!

 

+ 뷰를 공부하면서 뷰엑스 로직이 리덕스에 비해 굉장히 간단한걸 보고 부러웠는데, 이제 그렇게까지 부러워하지 않아도 될 것 같네요! 😁