🐛 리렌더링 이슈 해결하기

에디터 위에 새로운 기능을 추가하는 에픽을 시작하게 되면서 드래그, 텍스트 입력, 스텝퍼로 attr 값을 업데이트할 수 있는 기능을 개발하게 되었다. 기능 특성상 상태 변화가 자주 발생하기 때문에, React DevTools의 Highlight updates 옵션을 활성화한 상태로 관찰하며 개발을 진행했는데, 스크롤이나 특정 상태 변경이 발생할 때마다 모든 액티비티 블록이 동시에 리렌더링 되는 현상을 발견했다.
( 에디터는 각 액티비티마다 하나씩 렌더링 되며, 전체 액티비티가 리스트 형태로 구성되어 있다. 기능적으로는 특정 액티비티 하나만 수정되는 상황이었음에도 리스트에 포함된 모든 에디터가 함께 리렌더링 되고 있었다.)
처음에는 내가 추가한 기능에서 발생한 문제라고 생각했지만, 관련된 로직을 하나씩 제거해보며 확인한 결과, 해당 이슈는 이미 기존부터 존재하던 문제였다. 초기화 시점에 실행되는 상태 머신 로직이 전체 리렌더링을 유발하고 있었고, 이 부분을 해결하기 위해 내부 구조를 살펴보기 시작했다.

🚑 useMachine → useInterpret 전환

useEffect(() => {
  service.send({
    type: 'INIT',
    payload: {
      items,
      focusItemId,
    },
  });
}, [items, focusItemId]);

 
해당 INIT 액션은 context를 재설정하는 동작을 포함하고 있었고, 이 context의 변화가 구독 중인 모든 블록에 영향을 주면서 전체 리렌더링이 발생했다.

팀원에게 이 문제를 공유하던 중, useInterpret를 활용하면 리렌더링 제어에 유리하다는 조언을 들었고, 해당 방향으로 다른 팀원분과 함께 리팩터링을 진행하게 되었다. 공식 문서에서도 두 훅의 차이를 아래와 같이 설명하고 있다. 

useMachine automatically subscribes to the current state of the machine, which means every state update will result in a re-render of the component that calls it. This re-rendering isn’t always desirable.

useInterpret allows you to interpret a machine without subscribing to its updates, which means that by default, it won’t cause any re-rendering in the component.

 
이후 useInterpret를 사용해 상태 머신을 구동하고, 상태 구독이 필요한 위치에서만 useSelector를 통해 명시적으로 구독하도록 구조를 변경했다.

⭐️ 참고로, XState v5 기준으로는 useInterpret 훅이 useActorRef로 변경되었다. 우리는 현재 v4 기반으로 개발 중이기 때문에 여전히 useInterpret를 사용하고 있다. 

🚑  useSelector 조건 분기

위의 문제를 해결했음에도 불구하고 계속 리렌더링 이슈는 남아있었고, 다시 디버깅을 한 결과 아래와 비슷한 코드로 인해 리렌더링이 일어나고 있었다. 

const data = useSelector(service, (state) => state.context.sharedData);

 
sharedData가 변경될 때마다 이를 구독하고 있는 모든 컴포넌트가 리렌더링 되는 구조였다. sharedData는 전체 context 안에 존재하는 값이기 때문에, 일부 항목만 변경되어도 전체가 반응하고 있었다. 해당 문제를 해결하기 위해, 현재 선택된 항목에 해당할 때만 구독하도록 조건을 추가했다.

const data = useSelector(service, (state) => {
  if (localId !== state.context.selectedId) return undefined;
  return state.context.sharedData;
});

 
위와 같이 처리함으로써, 상태 변경이 발생하더라도 현재 항목에 해당하는 블록만 리렌더링 되고, 그 외의 블록은 영향을 받지 않게 되었고, 하나의 변경사항이 있을 때 모든 액티비티가 리렌더링 되는 이슈는 두 가지 방식으로 마무리되었다.  
 
기능 하나 개발하다가 우연히 자주 쓰이는 영역의 리렌더링 문제까지 함께 해결하게 되어, 개인적으로도 꽤 뿌듯하였다. 🙂