Profiler로 렌더링 속도 개선하기

Input 컴포넌트의 리렌더링 분석 과정에서 하단바 컴포넌트에서 불필요한 리렌더링이 발생하는 것을 발견했습니다.

React Developer Tools의 Profiler를 통해 분석한 결과, Context API의 pageId state 변경 시 pageId를 구독중인 하단바의 불필요한 리렌더링을 확인했습니다.

성능 분석 결과, 다음과 같은 리렌더링 체인이 발생했습니다

개선 전 커밋 과정

하단바 컴포넌트 리렌더링: 6.2ms (불필요한 리렌더링)

Fetcher 컴포넌트 리렌더링: 0.2ms

데이터 컴포넌트 렌더링: 41.3ms

총 렌더링 시간: 47.7ms

주요 원인으로는 다음이 파악되었습니다

Context API에서 관리되는 pageId state를 하단바 컴포넌트가 불필요하게 사용중

이로 인해 pageId가 변경될 때 하단바의 불필요한 리렌더링이 발생하고, 전체 렌더링 체인이 길어짐


export default function PostActionBar(){
    const router = useRouter();
    const {recordMap, pageId} = useNotionPage();
    const { handleUploadPost,isPending } = useNotionUploader();

Context API의 구조를 다음과 같이 개선하여 불필요한 state 구독을 제거했습니다

Context API에서 pageId state를 제거

필요한 경우 노션 페이지의 recordMap으로부터 직접 pageId를 추출하는 방식으로 변경


export default function PostActionBar(){
    const router = useRouter();
    const {recordMap} = useNotionPage();
    const { handleUploadPost,isPending } = useNotionUploader();
    
    let pageId:string | undefined;
    if(recordMap){
        const blockIds = getPageContentBlockIds(recordMap);
        pageId = blockIds[0];
    }

개선 후 커밋 과정

Fetcher 컴포넌트 리렌더링: 0.3ms

데이터 컴포넌트 렌더링: 40.9ms

총 렌더링 시간: 41.2ms (14.3% 성능 향상)

Context API에서 불필요한 state를 제거하고 리렌더링 체인을 최적화함으로써, 전체 렌더링 성능을 14.3% 개선했습니다. 특히 불필요한 하단바 컴포넌트의 리렌더링을 제거하여 렌더링 체인을 단순화하고, 전반적인 애플리케이션의 성능 향상에 기여했습니다.