[React] Recoil과 Redux의 차이점

 

안녕하세요. 오늘은 React의 상태관리 라이브러리인 Recoil과 Redux의 차이에 대해 알아보려 합니다!
시작에 앞서 먼저 두 라이브러리가 무엇인지부터 알아보겠습니다 🙂

 

 🔵 Recoil 이란?

 

Recoil은 페이스북에서 만든 새로운 리액트용 전역상태관리 라이브러리 입니다!
React의 동작 방식과 매우 유사하게끔 만들어졌다 합니다!

 

 

핵심개념

☝🏻 Atoms

- Atoms는 상태의 단위로, 값이 업데이트 되면 구독한 컴포넌트는 리렌더링이 됩니다.

- atom 함수를 이용해 생성할 수 있습니다.

- 컴포넌트에서 Atoms를 사용하려면 useRecoilState hook을 사용해야 합니다.

- useState와 비슷하지만, 상태가 컴포넌트 간으로 공유될 수 있는 것이 차이점입니다.

✌🏻Selectors

- Selector는 Atoms나 다른 Selector를 입력으로 받아들이는 순수 함수입니다.

- 상위의 Atoms나 Selector가 업데이트되면 하위의 Selector 함수도 다시 실행됩니다.

- Selectors는 상태를 기반으로 하는 파생 데이터를 계산하는 데 사용됩니다.

---

 🟣 Redux 란?

 

Redux는 자바스크립트 전역상태관리 라이브러리 입니다!
Redux의 본질은 Node.js 모듈입니다!

 

 

핵심개념

☝🏻 Store

- Store는 상태가 관리되는 하나의 공간입니다.

- 컴포넌트와 별개로 스토어라는 공간이 있어, 그 스토어 안에 필요한 상태를 담습니다.

- 컴포넌트에서 상태 정보가 필요할 때 스토어에 접근합니다.

✌🏻 Action

- Action은 앱에서 스토어에 운반할 데이터를 말합니다.

- Action은 자바스크립트 객체 형식으로 되어 있습니다.

🤟🏻 Reducer

- Action을 Store에 바로 전달하는게 아닌 Reducer에 전달해야 합니다.

- Reducer가 주문을 보고 Store의 상태를 업데이트 하는 것입니다.

- Action을 Reducer에 전달하기 위해서는 dispatch() 메서드를 사용해야 합니다.

---

 🟢 차이점은?

- Redux의 경우, 비동기 처리를 Third-Party library를 추가해야하지만 Recoil은 Selector에서 지원이 됩니다.

- Recoil 은 Redux 와 비교했을때 적은 학습곡선을 가지고 있고, 코드량도 Recoil 이 훨씬 적습니다.

- Redux의 경우가 대규모 프로젝트에서 유용합니다.

- Recoil은 오직 React만을 위한 상태관리 라이브러리이지만, Redux는 자바스크립트 상태관리 라이브러리입니다.
   - React의 문법에는 Recoil이 더 어울립니다.

 

 

 

이렇게 Redux, Recoil의 특징 및 차이점을 알아보았습니다.
감사합니다 :)