Zustand 이해하기

상태 관리는 종종 너무 복잡하게 느껴집니다.

React의 useState 사용법을 알고, props를 전달하는 법도 알며, 상태를 위로 끌어올리는(lift state up) 법도 알고 있습니다.

하지만 앱이 커지면 모든 것이 망가지기 시작합니다. 필요하지 않은 컴포넌트까지 데이터를 전달하게 되는데, 이를 prop drilling이라고 합니다. 이는 코드를 지저분하게 만들고 유지보수를 어렵게 합니다.

Zustand는 이 문제를 해결합니다. React 컴포넌트 외부에서 앱이 공유할 수 있는 상태를 제공합니다.

다음과 같이 생각해보세요:

Zustand가 없을 때: 컴포넌트 A가 B에게 props를 전달하고, B가 C에게, C가 D에게 전달합니다.

Zustand가 있을 때: 모든 컴포넌트가 중앙 스토어와 직접 통신합니다. 중간 매개체도, prop drilling도 없습니다.

Zustand 스토어는 두 가지로 구성됩니다:

  • State: 데이터.
  • Actions: 데이터를 변경하는 함수.

그게 전부입니다.

Zustand는 변경된 특정 데이터를 사용하는 컴포넌트만 다시 렌더링하기 때문에 빠릅니다.

페이지를 새로고침해도 데이터를 유지해야 한다면 localStorage를 사용하세요. localStorage는 문자열만 저장할 수 있으므로, 객체를 저장할 때는 JSON.stringify를, 읽어올 때는 JSON.parse를 사용해야 합니다.

인증(auth) 스토어를 구성하는 간단한 방법은 다음과 같습니다:

  • 사용자 정보와 토큰을 localStorage에 저장합니다.
  • 로그인 함수를 사용하여 스토어와 브라우저 저장소를 업데이트합니다.
  • 로그아웃 함수를 사용하여 둘 다 삭제합니다.

Redux와 비교하면 어떨까요?

Redux는 dispatcher와 reducer가 필요하며, 많은 양의 보일러플레이트(boilerplate) 코드가 수반됩니다. 반면 Zustand는 함수를 직접 호출할 수 있습니다. 인지적 부하(mental overhead)가 적고 설정도 간편합니다.

피해야 할 흔한 실수들:

  • create 함수에서 객체를 반환하는 것을 잊는 경우. 객체를 소괄호()로 감싸서 사용하세요.
  • 상태(state) 객체 내부에서 세미콜론을 사용하는 경우. 대신 쉼표(,)를 사용하세요.
  • 이미 문자열인 데이터를 파싱하는 경우.

상태 관리 라이브러리는 상태를 관리하기 위한 것이 아닙니다. 복잡성을 관리하기 위한 것입니다.

모든 API를 외우려고 하지 마세요. 도구가 해결하려는 문제가 무엇인지 살펴보는 것부터 시작하세요. 문제를 이해하면 도구가 왜 필요한지 알게 됩니다.

출처: https://dev.to/chinwuba_jeffrey/understanding-zustand-2g11