[Recoil vs Redux] Frontend Engineer를 위한 React 상태관리 도구 알아보기

프로젝트의 고도화가 진행되던 중, 이제는 전역 상태관리 도구를 이용하여 관련된 작업을 해야겠다 느꼈습니다.

리액트를 사용하고 있는 저는 리액트에서 쓸 수 있는 상태관리 툴들에 대해 알아보아야겠다 싶었습니다.

따라서 작성 시점 기준의 정보를 가지고 상태관리 툴에 대한 리서치를 시작하겠습니다.

 

---

 

상태관리(State Management)란 무엇일까?

상태관리는 프론트엔드 엔지니어링에서 중요한 개념이라고 볼 수 있습니다.

조금 더 쉽게 설명 해보자면 프론트엔드 단에서 관리되는 "시간이 지남에 따라 변경되는 모든 데이터에 대한 상태"를 관리하는 것을 말합니다.

프론트엔드 서버에서만 오가는 데이터 뿐만 아니라 백엔드와 네트워크와 소통하는 과정에서 이동하는 데이터 또한 이 상태관리에 해당됩니다.

만약 쇼핑몰에 들어간다고 가정을 해볼까요?

들어간다면 현재 로그인한 사용자의 정보, 쇼핑 카트의 내용, 모달창이 열려있는 지 여부, 페이지네이션이 되어있다면 현재 페이지의 번호 등이 모두 상태이다 라고 보시면 됩니다.

 

상태관리, 꼭 해야할까?

여기까지만 읽어서는 상태관리를 꼭 해야하는 지에 대해 잘 모를 수 있을 것입니다.

그렇다면 상태관리를 하지 않는다면 어떤 문제가 발생할 수 있을까요?

아래에 예상되는 문제들을 작성해 두었습니다.

• 같은 앱의 서로 다른 파트에서 데이터의 불일치가 발생합니다.
• 상태 변화는 예측 불가능성을 지니고 있기에 변경된 데이터를 추적하고 디버깅하기 어려워집니다.
• prop drilling : 트리 구조의 깊은 곳에 위치한 컴포넌트로 데이터를 전달하는 것이 복잡하며, 이로 인해 컴포넌트 재사용성이 줄어듭니다.
• 복잡한 상태를 동기화하고 조정하는 것이 어렵습니다. 이에 따른 문제들도 발생합니다.

물론 더 찾아본다면 더 많은 문제가 있겠지만 이 정도 문제만으로도 개발에 상당한 어려움을 겪을 수 있을 것입니다.

 

---

 

React 상태관리 툴 알아보기

이제, React에서 사용하는 상태관리 툴들에 대해 알아보도록 하겠습니다.

가장 많이 사용된는 강력한 툴로는 Recoil과 Redux가 있습니다.

 

Recoil

Installation | Recoil

1. 특징

Recoil은 페이스북에서 만든 상태 관리 라이브러리로, React 개념에 기반합니다.

주요 개념으로는 atom과 selector이 있습니다.

 

2. 장점

• React와의 밀접성으로 인해 React를 미리 알고 있다면 Recoil을 배우기가 쉽습니다.
• 상태 업데이트가 필요한 컴포넌트만 렌더링하므로 성능이 우수합니다. 
• 복잡한 상태 로직을 처리하고 위한 메커니즘이 내장되어있습니다.

 

3. 단점

• 단점이라고 보자면 Redux에 비해 사용된 지 얼마 안되어 커뮤니티의 데이터풀이 Redux만큼 크지 않습니다.
• 상대적으로 새로운 라이브러리이고 안정성에 대한 확신이 부족한 편입니다.

 

4. Recoil은 이 때 사용하면 좋아요

• React의 컨셉과 가깝게 상태관리를 하고 싶을 경우
• 개발중인 애플리케이션의 성능이 중요한 경우
• 상태 관리에 대한 코드 복잡성을 줄이고 싶은 경우

 

Redux

Usage Guides Index | Redux

1. 특징

자바스크립트 애플리케이션을 위한 예측 가능한 상태관리 컨테이너입니다.

모든 상태 변화는 액션에 의해 트리거되고, 리듀서에 의해 상태가 새로 생성됩니다.

상태를 중앙 집중화 되어있는 스토어에 저장됩니다.

 

2. 장점

• Time Travel 디버깅 기능을 제공합니다.
• = 이전 상태로 되돌아갈 수 있습니다.
• 미들웨어를 지원하여 커스텀 로직을 쉽게 추가할 수 있습니다.
• 커뮤니티의 크기가 크고 많은 리소스가 있어서 문제가 발생하였을 때 빠르게 도움을 받을 수 있습니다.
• 상태의 변화가 예측이 가능하고 추적하기가 쉽습니다.

 

3. 단점

• 상태 관리를 위해 많은 코드를 작성해야 합니다.
• 러닝커브가 높은 편이며, 알아야 할 기본 개념들이 많습니다.
• 비동기 로직을 처리하기 위해서는 추가 라이브러리를 적용해야합니다.

 

4. Redux는 이 때 사용하면 좋아요

• 애플리케이션의 상태 변화를 철저하게 관리하고 싶은 경우 사용합니다.
• 많은 큰 규모 프로젝트나 팀에서는 Redux를 쓰고 현재 많은 Regacy 코드가 Redux를 사용합니다.
• 미들웨어를 사용하여 커스텀 로직을 추가하고 싶은 경우에 사용합니다.

---

Recoil vs Redux

Redux와 Recoil의 가장 큰 차이점은 접근 방식입니다. 

Redux는 전역 상태 관리에 중점을 두는 반면, Recoil은 로컬 상태 관리에 중점을 둡니다. 

Recoil은 필요한 컴포넌트에서만 상태를 구독하므로 불필요한 렌더링이 줄어듭니다. 

반면에 Redux는 애플리케이션의 상태를 중앙에서 관리하므로 상태 변화를 예측하고 추적하기 쉽습니다.

최종적으로, 어떤 도구를 선택할지는 프로젝트의 특성, 개발 팀의 기술 수준 및 선호도에 따라 결정되어야 합니다.

 

---

End