리액트 상태관리, 어떻게 하고 계신가요?

안녕하세요, 주니어 프론트엔드 개발자입니다. 현재 저는 어드민 프로젝트를 리액트로 만드는 작업을 하고 있습니다. 프로젝트 규모가 꽤 크다보니, 상태관리에 대해 많은 고민을 하고 있어요. 그 동안 내가 알던 리액트가 맞나 싶을 정도로 상태에 대해 다시 생각해보고 있습니다. 처음에는 상태관리 라이브러리 없이 작업을 했습니다. 나름대로 기획서를 보고 상태를 저마다의 컴포넌트에 넣어 사용했어요. 그런데 진행하다보니 다른 곳에서도 해당 상태를 사용해야하는 일이 빈번하게 발생해서, 수정하는 시간이 길어질 때가 많았습니다. 그래서 결국 전역 상태관리 라이브러리(zustand)를 사용하게 됐어요. 막상 사용해보니 정말 좋았습니다. 제가 생각한 장점은 다음과 같아요. - 사용할 컴포넌트에서 바로 사용이 가능하다. - 스토어에서 뽑아 사용하다보니 데이터 동기화가 비교적 쉬웠어요. - 스토어별로 파일을 분리하고, 해당 로직만 담겨 있어 파악하기가 쉽다. - 며칠 뒤에 봐도 이어서 작업하기가 좋았습니다. - 이전에는 상태들이 어느 컴포넌트에서 쓰이는지 헷갈릴 때가 많았어요. - 컴포넌트는 뷰 컴포넌트로, 비즈니스 로직이 스토어에 담겨 있어서 좋았어요. 제 짧은 경험에 느낀 장점들로 계속 사용하고는 있지만 자꾸 의문이 듭니다. 거의 모든 상태들을 스토어에 담아 사용하다보니 '전역' 라이브러리의 역할에 맞지 않다고 생각이 들어요. 페이지 간에 공유하는 상태는 없다보니 context api도 고려해봤지만, zustand와 달리 하위 컴포넌트가 리렌더링이 되고, 해당 api는 다크 모드같은 기능에 쓰고, 러닝커브가 비교적 적은 zustand를 선택했습니다. 결론은, 여러분은 상태관리를 어떻게 하고 계신지 궁금합니다. 어떠한 기준이 있는지, 전역 상태관리 라이브러리는 어떤 경우에 쓰는지 등 제가 경험이 적고 혼자 프론트 개발을 하다보니 모든 의견 하나하나가 소중합니다. 리액트 상태관리에 대한 선생님들의 고견을 부탁드립니다.

input form 데이터 땡겨올 때 useRef를 많이 사용하지 않는 이유가 있나요?

회원가입 폼에 input에 useRef로 값 땡겨오면 값이 변할 때 재랜더링이 없어서 좋을 것 같은데 깃헙 다른 분들 코드 보면 거의 Hooks으로 useInput 써서 하는데 무슨 이유로 더 간단한 useRef를 안 쓰고 기존 onChage 형식으로 하는 건가요?

React Query 커스텀훅으로 분리, 어떤 방향으로 하나요?

Q. React Query를 커스텀훅으로 분리할 때, useQuery와 useMutation을 따로 작성하는게 좋을까요? 아니면 하나의 커스텀 훅 내에서 작성하는 것이 좋을까요? React Query를 이제 막 접하게 된 신입 프론트엔드 개발자입니다. 회사 프로젝트에서 React Query를 사용해서 서버 데이터를 받아오고 있는데, 코드 재사용성을 위해서 React Query로 데이터를 받아오는 부분과 수정 및 삭제하는 코드를 커스텀훅으로 분리하려 합니다. 검색해보니, 많은 분들이 useQuery와 useMutation을 따로 분리해서 작성하더라고요. 그런데 제가 작성하려던 방향은 다음과 같이 useQuery와 useMutation을 하나의 커스텀훅 내에서 리턴되는 방향이었습니다. React Query를 처음 써보는데, 코드의 방법 1과 방법2 중에서 어떤 방향이 더 재사용성이 좋은가요? 현업에서는 어떤 방향을 주로 사용하나요? (급하게 긁어와 수정한 코드라 정확하지 않을 수 있습니다)

커스텀 훅의 사용법과 관련해 두가지 궁금한 점이 있습니다!

커스텀 훅을 사용해보고 있는데 두가지 궁금한 점이 있습니다 커스텀 훅 내부에서 컴포넌트를 이용하려면 확장자를 ts가 아닌 tsx로 해야하는데 일반적으로 ts로만 작성하는 것 같습니다! tsx를 사용하는 경우는 없을까요? 커스텀 훅을 재사용의 목적보다 단순히 컴포넌트 내 비즈니스 로직을 분리하기 위한 목적 만으로 사용하기도 하나요? 여러 군데 사용되는 것이 아니라 한 컴포넌트의 비즈니스 로직을 분리한 의존성 높은 커스텀 훅도 있는지 궁금합니다!

State 변경 전 effect 실행하기

Functional component에서, 어떤 state가 변경되기 전에 effect를 실행할 수 있는 hook이 있는지 궁금합니다. useEffect / useLayoutEffect 등은 state가 변경된 뒤에 실행됩니다. Class component의 componentWillUpdate같은 라이프 사이클을 functional component에서 사용할 수 있는 방법이 있을까요?