문제의 발견 회사에서 서비스의 사용자 리스트를 페이지당 100명씩 가져와서 보여주는 페이지를 작업 중이었습니다. 이 페이지는 사용자 데이터를 받아서 화면에 렌더링 되기까지 시간이 상당히 걸리는 문제가 있었는데, 그 이유에 대해 파헤쳐 보았습니다. 아래 이미지는 사용자 페이지의 간단한 구조입니다. 먼저 기존에 데이터를 처리하던 방식은 다음과 같습니다. (많은 부분을 생략했습니다..) function UserList() { const [userList, setUserList] = useState([]); const { loading } = useQuery(userList를 불러오는 gql, { variables: {}, onComplete: (res) => { setUserList(res에서 뽑아낸 user..
