야, 너도 상태관리 할 수 있어 1편 : 리코일이란?

오늘은 리코일에 대한 이야기를 간단하게 해보려 합니다.
리코일은 페이스북에서 만든 상태 관리 라이브러리로, 리덕스에 비해 코드가 간결하고 직관적인 로직을 구성할 수 있다는 장점이 있습니다.

실제로 페이스북 팀에서도 "리코일은 리액트처럼 작동하고 생각합니다." 라는 내용을 장점으로 내세웁니다.

Context API와의 차이

컨텍스트는 리액트에 내장된 상태 관리용 API로, 별도의 라이브러리를 사용하지 않고도 상태를 관리할 수 있다는 장점이 있습니다. 

다만 컨텍스트는 중첩 가능한 Provider 컴포넌트와 useContext() 훅을 활용해 provider - consumer 관계를 구현하는데, 이러면 여러 컨텍스트가 중첩될 경우 값을 재계산하는 과정에서 성능 하락이 있을 수도 있습니다.

 

한번 인증 정보, 상점의 물품 정보, 내 지갑 정보를 상태로 관리하는 어플리케이션이 있다고 가정하겠습니다.
그럼 컨텍스트를 활용하는 어플리케이션의 구조는 아래와 비슷하게 구성될 것입니다.

현재는 컨텍스트가 3개만 존재하기에 별로 문제가 없을 수도 있지만, 컨텍스트가 수십개로 늘어나게 되면 갈수록 여러 계층을 거치게 되며 성능 저하가 일어날 여지가 있습니다.

 

그러나 리코일은 이 문제를 완벽하게 해결하는데요, 리코일을 사용해 위 어플리케이션을 구성하면 아래와 같은 형태가 됩니다.

보시는 것처럼 데이터가 각 컨텍스트를 거치는 대신 리코일은 전역으로 사용할 값 의 단위로 데이터를 관리합니다.
이 값들을 리코일에서는 아톰(Atom)이라 부르는데, 원자라는 뜻처럼 리코일의 모든 동작은 아톰을 기반으로 합니다.

Redux와의 차이

flux 아키텍처 기반의 리덕스는 중첩된 컨텍스트와 같은 문제는 없었지만, 다른 엄청난 문제를 안고 있었습니다.
바로 어렵다는 것이었습니다.

flux 아키텍처는 전역으로 관리할 값을 직접 수정하는 것이 아닌, 액션 객체와 '리듀서' 라고 불리는 순수 함수를 통해 간접적으로 값을 수정하는 방식입니다.

이를 초심자가 배우기에는 액션, 디스패치, 리듀서의 관계도 난해했을 뿐더러, 실제로 구현할 때는 "스토어를 위한 store.js 를 만들고, todoReducer.js 를 만들고, rootReducer.js 를 만들고, 이를 combineReducers 로 묶는다..." 와 같이 쉽지 않은 과정의 연속이었습니다.

 

그러나 리코일은 복잡한 구현은 전부 내부적으로 처리하고, 사용자는 리코일 커스텀 훅만을 사용해 상태를 조작할 수 있게 함으로써 코드를 말도 안되게 간단하게 만들었습니다.

Ex. 리덕스와 리코일에서 값을 변경하는 방법 비교

// 리덕스 사용 예시
const todos = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [
        ...state,
        {
          id: "1",
          text: "새로운 할일!",
        }
      ]
  }
}

// 리코일 사용 예시
const [todos, setTodos] = useRecoilState(todoState);

setTodos([...todos, {id: "1", text: "새로운 할일!"});

이번 글에서는 리코일과 기존의 데이터 관리 방법의 차이를 간단하게 알아보았는데요, 다음 글부터는 리코일을 실제로 사용하는 방법을 소개하도록 하겠습니다.