사용자가 아무짓을 하지 않아도 무한 리렌더링

문제상황

원인 분석 및 해결방안

// 슬립모드 전환을 위한 카운팅
useEffect(() => {
  const listener = setInterval(() => {
    ...

    setAliveState((각종 다른 상태 값들) => ({
      ...각종 다른 상태 값들,
      aliveCount: previousState.aliveCount + 1000,
    }));
  }, 1000);

  ...
}, [isAlwaysAliveMode, isCoverOpened]);

원인1) 잘못된 책임

• 슬립모드와 관련된 글로벌 상태인 aliveCount 값을 1초마다 변경함으로써 리렌더링을 일으키게 되는 상황임.

• 1초마다 바뀌는 카운트 상태값을, 가장 하단에 있는 화면이라는 이유로 “유저 목록 화면”에러 상태 처리를 하고 있었다.

• 슬립모드 카운트와, 스크린 세이버를 띄우는 책임을 AliveStateTracker로 완전히 이관한다.

원인2) 잘못된 상태 정의/사용

• 목적과, 설정되는 순간이 다른 상태 값들을 하나의 오브젝트 내에서 관리했기 때문이다.

• 동일한 값을 저장하더라도, ref가 달라지므로 다른 오브젝트로 상태값이 바뀌기 때문에 구성 프로퍼티를 참조하고 있던 모든 곳에서 리렌더링이 일어난다.

• 따라서 1초마다 변화하는 상태는 별도의 상태로 분리하여 따로 관리하도록 수정함.

원인3)

• 또한 하위 각각의 요소들에 메모이제이션이 되어 있지 않아서, 페이지 리렌더링 시 모든 요소가 다시 렌더링 되는 문제

• 따라서 메모이제이션을 통한 렌더 최적화 작업 진행

최적화 결과

• 매 초마다 유저목록 페이지 내의 모든 요소가 계속 리렌더링 되던 이슈를 해결함.

• 메모이제이션을 통해 변화가 있는 요소만 리렌더링 될 수 있도록 렌더 최적화

• 불필요한 상태 의존성 제거하여, 정말 유저 리스트와 관련된 값만 의존하도록 개편