불필요한 리렌더링 개선

문제 정의 및 리팩토링 목표

페이지 리스트 토글 버튼 클릭 시, 관련된 컴포넌트만 렌더링되어야 함에도 웹사이트 전체가 불필요하게 렌더링되는 문제가 발생했습니다.

React DevTools의 Profiler를 활용한 분석 결과, 페이지 리스트 컴포넌트가 렌더링된 후 App 컴포넌트도 추가로 렌더링되는 현상이 확인되었습니다.

이와 같은 추가 렌더링은 성능 저하를 유발하며, 사용자 경험(UX)을 저해할 수 있습니다. 따라서 페이지 리스트 토글 시 해당 컴포넌트만 렌더링되도록 최적화하여 성능 및 UX를 개선하는 것을 목표로 설정했습니다.

---

문제 원인 분석

1. 문제 추적 과정

소거법을 통해 문제 원인을 추적한 결과, Tools 컴포넌트의 useCurrentWorkspace 훅이 실행될 때 렌더링이 발생한다는 점을 발견했습니다.
Tools는 페이지 리스트 상위에 위치한 버튼 컴포넌트로, 새로운 페이지를 생성할 때 사용됩니다. 이때, useCurrentWorkspace는 현재 워크스페이스 정보를 불러오는 역할을 합니다.

문제는 App 컴포넌트도 동일한 useCurrentWorkspace에 의존하고 있다는 점입니다. 따라서 useCurrentWorkspace의 상태가 변경될 때, Tools뿐만 아니라 App까지 렌더링이 발생했습니다.

2. 로그인 여부에 따른 렌더링 차이 발견

문제를 더욱 깊이 분석한 결과, 로그인 상태와 비로그인 상태에서 렌더링 동작에 차이가 있음을 확인했습니다.

아래 캡처는 메인 페이지에서 로그인 상태에 따라 렌더링이 어떻게 달라지는지를 보여줍니다.

• 비로그인 상태: 페이지 리스트 외에 다른 컴포넌트도 렌더링 발생.
• 로그인 상태: 페이지 리스트만 렌더링.

---

문제의 근본 원인

useCurrentWorkspace에서 **사용자의 snowflakeId**를 파라미터로 사용하고 있었으며, 이 값은 로그인된 사용자만 얻을 수 있습니다.
기존 로직에서는 다음과 같은 방식으로 처리했습니다:

const { data: user, isError } = useGetUser();
const snowflakeId = isError ? "null" : (user?.snowflakeId ?? "null");

• 로그인되지 않은 상태에서 API 요청 시 403 에러가 반환되면, snowflakeId에 "null" 값을 할당.
• 로그인된 상태에서는 snowflakeId가 캐싱되어 문제가 없었으나, 403 에러의 경우 캐싱되지 않아 리렌더링이 발생.

결론적으로, 403 에러 상태가 상태값으로 사용되면서 useCurrentWorkspace를 참조하는 컴포넌트 전체가 불필요하게 리렌더링되었습니다.

---

해결 방안 및 개선 사항

1. 개선 방향

403 에러를 상태값으로 사용하지 않도록 로그인 상태를 명확히 관리하는 API를 추가하고, 이를 활용해 snowflakeId를 처리하도록 개선했습니다.

2. 개선된 코드

const { data: loggedIn } = useGetUserStatus(); // 로그인 상태 확인
const { data: user } = useGetUser();

const snowflakeId = loggedIn ? (user?.snowflakeId ?? "null") : "null";

useGetUserStatus: 로그인 상태를 확인하는 API를 호출. 로그인 여부에 따라 snowflakeId를 캐싱 가능하도록 처리해 불필요한 렌더링 방지.

결과

불필요한 컴포넌트 리렌더링 제거 로그인 여부와 관계없이 snowflakeId 상태를 안정적으로 관리하여, 관련 컴포넌트만 렌더링.

성능 및 UX 개선 React DevTools Profiler를 통해 렌더링 범위가 명확히 줄어든 것을 확인.