React-Query 도입
약 90초
서버 상태 관리를 React-Query로 전환한 경험
팀 프로젝트에서 API 데이터를 전역 상태에 저장해서 관리하다 보니 데이터가 오래돼도 업데이트가 안 되는 문제가 발생했습니다. 직접 refetch 타이밍을 관리하다 보니 코드도 복잡해졌습니다.
React-Query를 도입했습니다. 서버 데이터는 React-Query가 캐싱과 재요청을 관리하고, 클라이언트 상태만 별도로 관리하는 방식으로 분리했습니다. 처음에는 캐시 키 설계를 잘못해서 서로 다른 데이터가 같은 키를 사용하는 버그가 발생했는데, 키 구조를 계층적으로 관리하는 방식으로 수정했습니다.
이후로 데이터 신선도 관련 이슈가 없어지고 로딩 상태 관리 코드도 줄어들었습니다. 서버 상태와 클라이언트 상태를 구분하는 것이 상태 관리의 핵심이라는 것을 그 경험에서 배웠습니다. 그 경험이 상태를 종류별로 다르게 다루는 시각을 만들어주었습니다.
이 결의 특징
데이터 신선도 문제를 React-Query 도입과 캐시 키 계층화라는 구체 해결로 풀어낸 흔적이 있습니다.
이 결이 통하는 자리
서버 상태와 클라이언트 상태를 구분하는 것이 상태 관리의 핵심이라는 관점이 답에 담겨 있을 때 면접관의 신뢰가 쌓이는 자리를 자주 봅니다.