[React] Recoil이 뭔데요

 

1. Recoil 이란?

Recoil은 Facebook(Meta)에서 개발한 상태 관리 라이브러리로, React 어플리케이션에서 상태를 보다 더 효과적으로 관리할 수 있도록 도와주는 라이브러리로 볼 수 있다. 

 

1-1. Recoil의 특징

• Atom : Recoil에서의 상태 단위로, 여러 컴포넌트에서 공유할 수 있는 값이다. Atom의 값을 읽거나 쓸 수 있으며, 값이 변경되면 이를 구독하고 있는 컴포넌트가 자동으로 리랜더링이 되어진다.
• Selector : Atom이나 다른 Selector의 값을 기반으로 파생된 상태를 생성하는 함수다. Selector의 값을 기반으로 파생된 상태를 생성하는 함수다. Selector를 사용하게 되면 데이터의 계산, 변환, 비동기 처리를 보다 쉽게 할 수 있게 도와준다.
• React Hooks와의 통합 : Recoil은 React의 hooks API를 사용하여 상태를 관리하므로, 기존의 React 코드에 쉽게 통합할 수 있다.
• 비동기 데이터 처리 : Selector를 통해 비동기적으로 데이터를 가져오고, 이를 상태에 반영하는 것이 간편하다.
• 퍼포먼스 최적화 : Recoil은 상태를 구독하는 컴포넌트가 해당 상태가 변경될 때만 리랜더링되도록 최적화 되어 있기 때문에 불필요한 랜더링을 줄여줄 수 있다. 

2. Recoil에서 비동기 데이터 처리 작동 방식

1. 비동기 함수 : Selector를 정의할 때, 비동기 작업을 수행하는 함수를 작성할 수 있다. 예를 들어, API 호출을 통해 데이터를 가져오는 작업을 할 수 있다.
2. 상태 반영 : Selector가 비동기 작업을 수행하고, 데이터가 성공적으로 로드되면 이 데이터를 atom이나 다른 컴포넌트의 상태에 반영해준다.
3. 자동 업데이트 : Selector가 사용하는 atom의 값이 변경되면, 해당 Selector도 자동으로 다시 계산되므로, 최신 상태를 항상 유지해줄 수 있다.

3. Recoil의 퍼포먼스 최적화

1. 효율적인 리랜더링 : Recoil은 상태가 변경될 때 해당 상태를 구독하는 컴포넌트만 리랜더링을 해준다. 이로 인해서 불필요한 랜더링이 줄어 들어 성능 개선에 많은 도움이 된다. 예를 들어, 여러 컴포넌트가 같은 atom을 사용할 때, atom의 값이 변경되어도 그 atom을 사용하지 않는 다른 컴포넌트는 영향을 받지 않으므로 리랜더링 되지 않는다.
2. 즉각적인 UI 반영 : 상태가 변경되면 해당하는 컴포넌트가 즉시 업데이트가 되므로, 사용자에게 더 빠르고 일관된 경험을 제공해줄 수 있다.
3. 메모리 사용 최적화 : 불필요한 리랜더링을 피함으로써 메모리 사용량도 줄여줄 수가 있다. 이는 특히 복잡한 어플리케이션에서 중요한 요소로 볼 수 있다.
4. 비동기 데이터의 효과적인 처리 : Selector를 통해 비동기적으로 데이터를 로드할 때, 필요한 데이터만 가져와서 업데이트하므로, 전체 어플리케이션의 성능을 더욱 향상시킬 수 있다.

4. Redux와의 차이점

• 생태계와 도구 지원의 차이 : Redux는 오랜 역사를 가지고 있고 에이 따라 큰 커뮤니티가 형성 되어 있어서 다양한 미들웨어, 플러그인, 도구들, 다양한 래퍼런스가 존재하는데 Recoil은 상대적으로 새로운 라이브러리이기 때문에, 아직까지는 생태계가 덜 발달되어 있다.
• 디버깅과 로깅 : Redux는 상태 변경을 액션 기반으로 관리하기 때문에, 상태의 변화를 추적하고 디버깅하기가 용이하다. 또한 Redux DevTools를 사용하게 되면 상태 변화를 쉽게 확인할 수 있다. 반면 Recoil은 이러한 기능이 상대적으로 부족하다.
• 복잡한 상태 관리 : 대규모 어플리케이션에서 복잡한 상태를 관리할 때, Redux의 구조적 접근 방식이 더 유리할 수 있다. Redux는 액션과 Reducer를 통해 명확한 흐름을 제공하기 때문에, 상태 변경을 이해하기가 보다 쉽다.
• 학습 곡선 : Recoil은 새로운 개념인 atom과 selector를 도입하기 때문에, 기존에 Redux에 익숙한 개발자에게는 새로운 패러다임을 배우는 데 시간이 걸릴 수 있다.
• 상태 관리의 일관성 : Redux는 전역 상태 관리에 더 적합한 구조를 가지고 있어서, 상태가 전역적으로 일관되게 유지되는 반면, Recoil은 atom 단위로 상태를 관리하기 때문에 일관성을 유지하기 어려운 경우가 종종 있을 수도 있다.

마치며

여태 전역상태관리는 Redux만 사용을 해봤고, 최근에 프론트 공부를 다시 시작했을 때 ReactQuery로 hook을 만들어 쓰면서 Redux마저 사용하지 않은 상태로 프로젝트에 들어와서 보니 뭐가 뭐고 언제 사용하는 것인지가 헷갈려서 찾아보니 현업자 기준에서는 고려할 사항이 꽤 많아 보였다. 그냥 흐름이 Redux => Recoil => ReactQuery 로 유행이 넘어갔다고만 생각했지 상태 관리는 고려하지 않고 이것저것 해왔다는 생각도 들고 적어도 내가 사용하는 것에 대해 어떤 이유로 선택을 했는지도 설명할 수 있어야 했는데 굉장히 무지했다고 생각이 들었다. Kotlin을 공부할 때는 이런 고민을 꽤 많이 했던 것 같은데 신경을 많이 써야겠다.