우리는 React 상태를 과도하게 복잡하게 만들고 있나요? Valtio 살펴보기

Source: Dev.to

React State는 간단해 보이지만—그렇지 않을 때도 있다

React 상태 관리가 필요 이상으로 복잡하게 느껴지는 경우가 많습니다.
셀렉터, 메모이제이션, 의존성 배열…
문제는 상태가 무엇인지가 아니라 상태가 어떻게 업데이트되는지입니다.

기존 상태 관리의 문제점

많은 React 프로젝트, 특히 규모가 커질수록 상태 로직이 퍼지는 경향이 있습니다:

• UI 상태와 비즈니스 상태가 뒤섞인다
• 업데이트를 제어하기 위해 셀렉터가 추가된다
• 수동 리렌더링 최적화가 도입된다
• 상황을 통제하기 위해 추가 추상화 레이어가 만들어진다

동작은 하지만, 지속적인 오케스트레이션이 필요합니다.

Valtio 소개

Valtio는 프록시를 기반으로 한 다른 접근 방식을 취합니다. 업데이트 트리거와 구독을 생각하는 대신, 상태와 직접 작업합니다.

import { proxy } from 'valtio';

const state = proxy({ count: 0 });

function increment() {
  state.count++;
}

컴포넌트에서 Valtio 사용하기

import { useSnapshot } from 'valtio';

function Counter() {
  const snap = useSnapshot(state);
  return <div>{snap.count}</div>;
}

그게 전부입니다.

• 셀렉터가 필요 없습니다
• 의존성 배열이 필요 없습니다
• 보일러플레이트가 최소화됩니다

장점

• 컴포넌트가 언제 리렌더링되어야 하는지 고민할 필요가 없습니다.
• 업데이트를 수동으로 오케스트레이션할 필요가 없습니다.
• 메커니즘이 아니라 상태 자체에 집중할 수 있습니다.
• 모델이 제어된 것보다 더 반응적으로 느껴집니다.

복잡성이 남는 경우

복잡성이 완전히 사라지는 것은 아닙니다. 실제 애플리케이션에서는 여전히 다음과 같은 구조가 필요합니다:

• 동적 폼
• 파생 상태
• 비동기 흐름

복잡성을 오케스트레이션에서 멀리 옮김으로써 코드를 이해하기 쉬워집니다.

관련 사용 사례

• 복잡한 폼 (예: React Hook Form, MUI)
• 필드 간 의존성이 있는 동적 UI
• 개발 중에 자주 변하는 상태

전통적인 패턴이 한계에 부딪히는 시나리오입니다.

결론

Valtio가 모든 상태 관리 솔루션을 대체하진 않지만, 중요한 가정을 뒤흔듭니다:

우리는 상태를 관리하고 있는가… 아니면 그 복잡성을 관리하고 있는가?

최근 다른 사람들은 어떻게 상태 관리를 접근하고 있는지 궁금합니다.