우리는 Redux 대신 Valtio를 사용합니다. 아무도 후회하지 않는다.

Source: Dev.to

Overview

카운터를 업데이트하기 위해 Redux는 스토어, 리듀서, 액션, 셀렉터, 그리고 경우에 따라 미들웨어까지 설정해야 합니다. Valtio는 세 줄의 코드만 필요합니다.

우리는 15명 규모 스타트업에서 프론트엔드 상태 관리를 전부 Valtio로 교체했습니다. 그때는 1년 반 전이었죠. 한 사람도 다시 Redux로 돌아가자는 요청을 하지 않았습니다.

우리의 경험을 공유합니다.

The Ceremony Problem

Redux 자체가 잘못된 건 아닙니다. 잘 동작합니다. 다만 절차가 너무 많다는 점이 문제였습니다.

새 기능을 추가할 때마다 새로운 slice, 새로운 액션 타입, 필요하다면 새로운 셀렉터까지 만들어야 합니다. 우리 코드베이스는 로직보다 Redux 연결 코드가 더 많아지는 파일도 있었습니다.

빠르게 움직여야 하는 작은 팀에게는 이것이 선택이 아니라 세금과도 같습니다.

Why Valtio

누군가 Zustand를 언급했습니다. Jotai도 눈에 띄었죠. 두 라이브러리 모두 훌륭해 보였습니다. 하지만 Valtio 문서를 읽으면서 “이게 뭐지?” 싶을 정도였습니다.

프록시 객체를 만들고, 그 프록시 객체를 직접 변형합니다. 프록시가 바로 상태를 나타내기 때문이죠. 상태를 사용하는 컴포넌트는 자동으로 다시 렌더링됩니다.

• 디스패치가 필요 없습니다.
• 액션 크리에이터를 찾을 필요가 없습니다.
• 컴포넌트를 connect하거나 useSelector()를 사용할 필요가 없습니다.

The Migration

예상대로 가장 어려운 부분은 마이그레이션이었습니다. 우리 앱 곳곳에 Redux가 있었습니다—인증 상태, UI 상태, 폼 상태, 응답 캐시 등.

주말에 한 번에 모두 바꾸지는 않았습니다. 기존 기능들은 그대로 Redux를 사용했고, 해당 영역을 수정할 일이 생길 때마다 Valtio로 전환했습니다.

3~4개월 만에 완전히 마이그레이션을 마쳤습니다.

What I Didn’t Expect

예상치 못했던 점은 코드 리뷰 과정이 눈에 띄게 빨라졌다는 것입니다.

Redux PR은 5줄 정도의 로직 변경이라도 40줄 이상의 diff에 파묻히기 쉽습니다. Valtio를 쓰면 변경된 5줄만 보이면 됩니다.

새로운 개발자들의 질문도 줄어듭니다. Redux에서는 온보딩 때마다 상태 구조를 설명하느라 절반 이상을 잡아먹었지만, 이제는 “네, 모든 것이 프록시 객체에 저장돼요. 그냥 변형하면 돼요”라고 말하면 금방 이해합니다.

The Numbers

• Valtio: 주당 약 120만 npm 다운로드
• Redux: 주당 약 2700만 npm 다운로드
• Zustand: 주당 약 2800만 npm 다운로드

우리는 방 안에서 가장 인기가 적은 옵션을 골랐습니다.

Valtio, Zustand, Jotai 모두 같은 사람이 만들었습니다. Daishi Kato가 가장 인기 있는 React 상태 관리 라이브러리 세 가지를 만든 셈이죠. 각각은 같은 문제에 대해 근본적으로 다른 접근 방식을 취합니다:

• Valtio – 변이 추적을 위해 JavaScript Proxy 사용
• Zustand – 최소한의 훅 기반 스토어 사용
• Jotai – 원자(atom) 사용

같은 개발자, 세 가지 철학.

우리는 새로운 것을 배울 필요가 없는 Valtio를 선택했습니다.

The Tradeoffs

프록시 기반 반응성은 상태를 전달하거나 직렬화할 때 예상치 못한 문제를 일으킬 수 있습니다.

SSR 스냅샷이 상태와 일치하지 않는 이상한 케이스를 겪었는데, 이를 해결하는 데 오후 내내 걸렸습니다. 하지만 그때까지 Redux 템플릿을 만들며 보냈을 수많은 저녁 시간보다 훨씬 짧았습니다.

The Honest Take

Valtio가 모든 팀에 맞는 것은 아닙니다. 규모가 크고 엄격한 패턴을 요구하는 조직이라면 Redux의 의견이 강한 구조가 오히려 장점이 될 수 있습니다. 타임 트래블 디버깅이 필요하다면 Redux DevTools가 최고입니다.

하지만 상태 관리가 방해되지 않길 원하는 작은 팀이라면, 실제 앱을 관리하면서 제가 작성한 가장 적은 양의 상태 관리 코드가 Valtio입니다.

한 개발자가 같은 질문에 대한 세 가지 답을 만들었습니다. 우리는 가장 단순한 것을 골랐고, 1년 뒤에도 다시 그 선택을 할 것입니다.

What state management library does your team use, and have you ever considered switching? 👇