리액트 개발에 있어, 선택의 폭이 넓은 것은 큰 장점이지만 때로는 너무나 많은 옵션들이 압도적으로 느껴질 수 있습니다. 여기에는 상태 관리, 라우팅, 폼 관리, UI 컴포넌트 라이브러리 등이 포함되는데, 사실 이러한 라이브러리들은 리액트 개발 과정을 더욱 간편하고 효율적으로 만들어주는 유용한 옵션이기도 합니다. 그래서 오늘은 리액트를 사용할 때 자주 함께 사용되는 라이브러리들을 살펴보겠습니다.
리액트 생태계에서 어떤 라이브러리가 프로젝트에 가장 적합한지 판단하는 것 역시 중요한 작업 중에 하나인만큼, 리액트와 함께 일반적으로 함께 자주 사용되는 라이브러리를 목록으로 정리해보도록 하겠습니다.
로직
이 섹션에서는 앱의 동작을 구현하기 위한 라이브러리를 소개합니다.
리액트 상태 관리
리액트에서 상태를 관리하는 가장 기본적인 방법은 useState 훅을 사용하는 것입니다. 하지만 프로젝트가 커지면서 상태를 여러 컴포넌트 간에 공유할 필요가 생깁니다. 상태를 끌어올리거나 컨텍스트를 사용하는 방법도 있지만, 이 방법들은 복잡한 앱에서는 한계가 있습니다. 특히, 리액트 컨텍스트를 사용할 때는 성능 문제가 발생할 수도 있죠. 이러한 상황에서는 상태 관리 라이브러리의 필요성이 대두됩니다.
Flux 패턴과 Redux
Flux 패턴은 리액트의 초기 상태 관리 방법으로, 전체 상태를 단일 "스토어"에 저장합니다. Redux는 이 패턴을 사용하는 가장 유명한 라이브러리입니다. 초기 버전의 Redux는 설정이 복잡하고 보일러플레이트 코드가 많다는 평가를 받았지만, Redux Toolkit의 출시로 이러한 문제가 많이 해결되었습니다. 최근에는 Zustand와 같은 라이브러리가 Flux 패턴을 더 간결하게 구현하며 인기를 얻고 있습니다.
프록시 기반의 상태 관리: MobX와 Valtio
프록시 패턴은 JS proxy를 사용하여 상태 변경을 감지하고, 관련된 컴포넌트를 리렌더링합니다. MobX는 이 패턴을 구현한 가장 유명한 라이브러리 중 하나입니다. MobX는 상태를 변경할 수 있는 점에서 스토어 기반의 상태 관리와 다릅니다. Valtio는 MobX보다 더 간단하게 구현되어 있어, 새롭게 주목받고 있는 라이브러리입니다.
아토믹 상태 관리: Recoil과 Jotai
아토믹 상태 관리는 상태를 아톰(작은 단위)으로 나누어 관리합니다. Recoil과 Jotai는 이러한 아토믹 패턴을 사용하는 라이브러리로, 상태를 여러 컴포넌트에서 효율적으로 공유할 수 있도록 해줍니다. 특히, 간단한 애플리케이션부터 복잡한 애플리케이션까지 다양한 상황에서 유용하게 사용됩니다.
상태 머신을 활용한 상태 관리: XState
상태 머신은 앱의 상태를 더 체계적으로 관리할 수 있게 해줍니다. XState는 유한 상태 머신을 구현하는 라이브러리로, 복잡한 상태 전환을 보다 명확하게 다룰 수 있습니다. XState는 리액트와 함께 사용하기 위해 @xstate/react 패키지를 제공하며, 이를 통해 훨씬 효율적인 상태 관리가 가능해집니다.
데이터 페칭
데이터 페칭은 리액트 앱에서 가장 흔한 작업 중 하나입니다. 기본적으로 Fetch API를 사용할 수 있지만, 많은 개발자들은 Axios와 같은 라이브러리를 선호합니다. 이는 Fetch API가 제공하지 않는 편의성과 추가 기능을 제공하기 때문입니다. 그러나 앱의 규모가 커지면서 데이터 페칭의 복잡성도 증가합니다. 이런 상황에서 TanStack Query(구 React Query)와 SWR은 리페칭, 캐싱 및 낙관적 업데이트 등을 쉽게 처리할 수 있는 리액트 훅을 제공합니다. 리덕스를 사용하는 경우에는 RTK Query가 효과적인 대안이 될 수 있습니다.
