React Recoil vs Context

 

Recoil과 Context 모두 React에서 여러 컴포넌트사이에 상태를 관리 하는 라이브러리입니다.

 

Context는 Props drilling을 해소하고자 만들어진 React에 Built-in된 라이브러리이며,

React는 좀더 모던하고 향상된 기능을 지원하는 상태관리를 위한 라이브러리 입니다.

 

Recoil이 대중화되기전에는 Context를 활용하여 상태관리를 하는 프로젝트도 많았지만,

최근에서 Recoil을 많이 사용하는 추세입니다.

 

그럼 간단한 코드로 두 가지 기능을 비교해보겠습니다.

---

1. 속성 정의

 

Recoil : 전역으로 설정되기 때문에 키 값을 가지며 키값은 유일해야 합니다.

export const PopupTodoState = atom({
  key: 'PopupTodo/show',
  default: false,
});

 

context : createContext를 사용하여 해당 context를 생성합니다.

export const PopupTodoContext = React.createContext({
  isShow: false, // popup show or not
  hide: () => {}, /// popup hide
});

 

---

 

2.Hook을 통한 사용

 

Recoil

- useRecoilState

- useSetRecoilState

- useValueRecoilState

const [isShowPopupTodo, showPopupTodo] = useRecoilState(PopupTodoState);

 

  return (
    <SlidePopup title="팝업 todo" onExited={() => showPopupTodo(false)}>
      <ListStyled>
        <li>할일1</li>
        <li>할일2</li>
      </ListStyled>
    </SlidePopup>
  );

 

 

context

- useContext : 다른 컴포넌트가 제공한 Context value를 사용

const context = useContext(PopupTodoContext);

 

  return (
    <SlidePopup title="팝업 todo" onExited={() => context.hide()}>
      <ListStyled>
        <li>할일1</li>
        <li>할일2</li>
      </ListStyled>
    </SlidePopup>
  );

 

---

3. 사용방법

 

Recoil : hook을 사용하여 다른 컴포넌트에서 state 접근

const [isShowPopupTodo, showPopupTodo] = useRecoilState(PopupTodoState);
...
{isShowPopupTodo && <PopupTodo />}

 

context

- Provider를 사용하여 다른 컴포넌트에 제공할 value 선언

(이때, createContext를 사용했을때 선언한 값과 value 타입이 일치해야 합니다.)

const [isShowPopupTodo, showPopupTodo] = useState(false);
const hide = () => showPopupTodo(false); // hide Function만 제공
...
<PopupTodoContext.Provider value={{ isShow: isShowPopupTodo, hide }}>
     {isShowPopupTodo && <PopupTodo />} 
</PopupTodoContext.Provider>

 

 

---

- Context는 상위 컴포넌트에서 하위컴포넌트로의 props drilling을 막기위한 목적이 있었기

때문에 명시적으로 상위컴포넌트에 state를 전달하기 위해 Provider를 사용하여 value를 정의합니다.

 

- Recoil은 상위 개념이 없으며 각 컴포넌트가 state를 공유 및 관리합니다.

 

작은 예제를 통해 비교했지만 큰 규모에서는 다양한 상태관리에 따른 고민이 필요합니다.

따라서 해당 state의 목적에 맞게 사용하는 것이 좋습니다.

 

하지만, 개인적으로는 Recoil의 selector 기능까지 고려한다면 전반적인 상태관리는 Recoil을 추천합니다!!!