React Query

서버 상태 관리의 꽃🌷

그냥 내 마음대로 이름 지어보았다.

개발자 채용공고를 보면 툴과 스택에

---

서버 상태 관리 : tanstack-query
클라이언트 상태 관리 : zustand 또는 redux, recoil

---

라고 기재해 놓은 모습을 종종 볼 수 있다.
그래서 상태란 무엇이고 서버 상태와 클라이언트 상태는 무엇인지 짱 간단하게 적을 것이다.

리액트에서 상태란?

나의 주관적인 정의로 state는 동적으로 움직이는 값이라고 생각한다.

리액트에서 상태가 변경되면 해당 상태를 사용하는 컴포넌트는 리렌더링되어 새로운 UI를 그린다.
요때 이제 virtual DOM이 먼저 그려보고 바뀐 부분만 휘릭 바꿔준다.

근데 리렌더링할 때 함수도 다시 실행되니까 일반적인 선언(const, let, var)으로 선언된 애들의 값도 새로 초기화된다.
그래서 useState로 리렌더링이 발생해도 상태 값을 유지할 수 있도록 하는 것!

이게 어떻게 되냐?

React는 컴포넌트마다 상태 저장소(state queue)를 유지한다.
useState로 선언된 상태는 이 저장소에 저장되고 상태변경이 발생하면 react가 컴포넌트를 다시 렌더링하고 최신 상태값으로 제공해준단다.

*queue 구조인 건 처음 알았다

아무튼 저무튼

상태는 변하는 값이고 프론트엔드 개발을 하면, 사용자가 값을 조작하는 것도 있고 조작 후 서버에서 내려주는 데이터도 변하는데, 이걸 나눠서 관리하는게 클라이언트 상태 관리 / 서버 상태 관리 임.

클라이언트 상태관리 툴은 Redux, recoil등 라이브러리를 넘어서 요즘 zustand가 추세
서버 상태 관리 툴은 (구)react-query (현)tanstack-query가 짱이다

클라이언트 상태관리 추천 도서

원티드 프리온보딩에서 강연하신 캐치테이블 개발자분이 추천해주심
저도 샀는데요.. 아직 읽진 못 했고요.. 넵.. 앞 장 읽고 있어요 .

서버 상태 관리 추천

참고영상 : [10분 테코톡] 가람, 도리의 Tanstack Query v5 (React Query)
죄송. 보다 말았습니다

구글에 react query 강의 치면 바로 나오는 유데미 강의
tanstack-query 치면 테코톡만 나오더라. 유데미 강의 좀 탐난다.

tanstack-query 공홈
하지만 공식 문서도 엄청나게 어렵지는 않고 보면 공홈에서 파는 강의? 튜토리얼? 같은 것도 있다.
11만원짜리 유데비 인강 살까말까 고민하다가 .. 일단은

유투브 영어 강의
이걸로 존버 타보기로 결정.
무려 vite 프로젝트 !!

---

사실 이미 프로젝트에서 주니어 개발자분이 빌딩해 놓은 코드로 숙지 및 체득은 조금 했다. CRUD 정도는 핸들링 가능합니당,, 하지만 이론 배경이 부족한 것 같고, 쓰는 메소드와 속성만 쓰다보니 좀 더 공부해보면 라이브러리가 제공하는 기능으로 더 빠르고 간결하고 버벅임없이 상태관리 및 연동할 수 있을 것 같아서 공부하고자 한다.