230507 react-query와 zustand를 사용하는 목적

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영).

 

---

현재 FE 네 분과 BE 네 분이 함께하는 미니 프로젝트를 진행 중 이다.
프로젝트에서 결정해야 할 여러가지 중 하나인 개발 환경설정하기를 진행 중 zustand와 react-query를 사용하는 부분에 대한 이야기를 하기 위해 각 라이브러리의 장단점과 사용하게 되는 이유 등을 살짝 적어보려 한다.

---

zustand와 react-query를 알아보기전에 우선 client state와 server state 의 개념의 차이를 알아야 한다.

client state - 클라이언트 상태

웹 애플리케이션에서 브라우저 측에서 유지되는 상태를 의미한다. 브라우저는 사용자 인터페이스를 렌더링하고 사용자의 입력 및 이벤트를 처리하는 등의 역할을 담당한다. 이러한 작업에서 클라이언트 측에서 상태를 관리하게 되는데 예를 들어, 브라우저에서 사용자가 입력한 데이터나 애플리케이션의 상태 등이 이에 해당된다. 클라이언트 상태는 브라우저의 메모리에 저장되기 때문에 브라우저 새로고침, 탭을 닫기, 브라우저 종료 등의 상황에서 상태가 사라지게(유실) 된다.

 

server state - 서버 상태

웹 애플리케이션에서 서버 측에서 유지되는 상태를 의미한다. 서버는 클라이언트 요청에 따라 데이터를 생성하고 처리하며, 이러한 작업에서 서버 측에서 상태를 관리하게 되는데 예를 들어, 데이터베이스에 저장된 사용자 정보나 애플리케이션 로직에서 사용하는 일시적인 상태 등이 이에 해당된다. 서버 상태는 클라이언트와 상호작용할 때마다 서버에서 가져오거나, 업데이트하거나, 생성할 수 있다.

 

클라이언트 상태와 서버 상태는 모두 웹 애플리케이션의 상태 관리에 중요한 역할을 한다. 브라우저와 서버 간에 이러한 상태 정보를 주고받고, 이를 통해 애플리케이션의 상태를 유지하며, 업데이트하고, 표시할 수 있다.

---

react-query 개념, 사용이유와 장단점

react-query는 React 앱에서 데이터를 처리하고자 할 때 사용한다. 이 라이브러리는 서버에서 쿼리를 수행하여 데이터를 가져와 캐싱하고, 업데이트하는 것을 돕는데, 이는 앱의 성능을 향상시키는 데 매우 유용하다.

가령, API를 10초 ~ 20초 마다 콜을 하는데, 이 시간 사이에 데이터의 변함이 없다면 콜을 해줄 필요가 없기 때문에 react-query가 알아서 캐싱한 데이터를 돌려준다. 하지만 유효시간이 지났거나, 저 시간 사이에 데이터의 변화가 있다면, 변화된 데이터 값을 업데이트 해 돌려준다.

즉, 캐싱이 주 목적이며, 서버의 결과값이 변화가 있을 때를 고려했을 때 사용하면 좋을 라이브러리이다.

react-query의 장점은
1. 상태와 관련된 다양한 데이터를 제공
2. 복잡한 구현과 설계 없이 쉬운 구성 및 사용
3. Redux보다 가벼우나, 라이브러리에 대한 의존성 증가와 GraphQL 지원이 부족하다는 단점이 있다.

---

zustand 개념, 사용이유와 장단점

zustand는 독일어로 상태라는 뜻을 가진 리액트 상태 관리 라이브러리이다('저스탠드'라고 읽는 것 같은데, 개인적으론 '추슈탄트'라고 읽고 듣는게 더 익숙한 단어이다).  API에서 가져온 데이터를 어딘가 저장한 후 여러 컴포넌트에 재사용해야하는데 구현 철학을 갖고 있다. React Hooks API를 기반으로 작동하며, 단순한 구성으로 강력한 기능을 제공하는데, 상태를 관리하기 위해 상태 전이를 처리하는 reducer함수와 상태를 읽고 업데이트하기 위해 사용하는 리액트 Hook 함수로 구성된다.

즉, zustand 같은경우 데이터 결과값을 리액트 컴포넌트에서 전역으로 사용하기 위해서 저장하는 방법에 대한 구현기능을 가진 라이브러리라 이해하면 될 것 같다.

zustand의 장점은
1. Redux와 비교하여 패키지의 크기가 작음
2. 강력한 개발자 경험을 제공하는 간단한 API
3. 리덕스보다 더 나은 성능을 제공하지만
상대적으로 새로운 라이브러리이며 현실적으로 Redux의 인기가 더 크는 단점이 있다.

---

위와 같은 편의성이 있는 라이브러리이지만, FE개발자라면 이해도가 당연히 필요하고 진리인 Redux이기에 아무래도 zustand나 react-query까지 지양하고 우선 Redux를... 숙달까지는 어렵더라도 숙지하기 위해 공부가 더 필요하다는 생각이 든다.

결론을 이야기하자면 현재는 두 라이브러리를 사용하기로 결정을 하고 작업을 진행 중에 있다.
앞서 말했던 것 처럼 Redux진행하는 것이 성장에 도움이 되고 맞는 선택이겠지만 현실적으로 프로젝트의 기간이 넉넉치 않고 Redux를 익히고 사용하는데 까지 공수가 꽤나들어갈 것 같아 이러다 프로젝트 기간 동안 기술구현도 다 끝내지 못하고 마무리가 될 것 같았기 때문이다(적어도 뭐라도 만들어야 될 것 아님...!! ㅠㅠ).

아무튼 사용하기로 결정했지만, 이 두 라이브러리의 사용 목적에 대한 생각과 피드백을 들으면서, 왜 개발자라는 직군이 고민을 해야하고 고려해야하고, 왜? 라는 생각을 가져야 하는 직업인지 다시 한 번 생각해보는 경험이 되었다.

앞으로도 개발적으로 어떤 액션을 취하게 될 때 이유를 항상 생각하며 작업하고 진행하려 노력해야겠다.