렌더링 성능 최적화 해보기

현재 상황

체크박스 하나를 체크하면 거의 모든 컴포넌트가 다시 렌더링 되고 있다. 이것을 개선시켜 보도록 하겠다.
디버깅의 편의성을 위해 각 컴포넌트 마다 console.log를 남겼다.

React.Memo 적용해보기

현재 이슈 목록의 컴포넌트 구조는 아래와 같다. 이 컴포넌트들에게 React.memo를 적용시켜보도록 하겠다.
React.memo란, 컴포넌트의 props가 바뀌지 않았다면 리렌더링을 방지하여 컴포넌트의 리렌더링 성능 최적화를 해줄 수 있는 함수를 말한다.

<IssueContainer>
  <IssueItem>
    <IssueLogo />
    <IssueContent />
  </IssueItem>
</IssueContainer>

IssueLogo와 IssueContet는 다시 렌더링 되지 않고있는 모습이다.
IssueItem 이라는 상위 컴포넌트에서 내려받은 props가 변하지 않았기 때문인 것으로 생각된다.
하지만, 아래처럼 여전히 IssueItem은 여러번 실행되고 있다.

React.useMemo 적용해보기

React.memo만 적용했을 때, IssueItem은 계속해서 실행되고 있다.
IssueItem은 props로 issue를 가지고 있고 이 props를 그대로 IssueLogo와 IssueContent에게 전달해주고 있는데,
왜 IssueItem만 React.memo가 적용되지 않는지는 잘 모르겠다.. 리액트 내부적으로 뭔가가 있는 듯 하다.

그래서 React.useMemo를 적용시켜 보기로 하였다.
React.useMemo는 인자로 전달한 값이 바뀌기 전까지 값을 캐싱해두는 함수이다.
아래 코드와 같이 [issue.checked, issue]를 인자로 전달하여 두 값 모두 바뀌지 않았다면 캐싱된 값을 쓰도록 해보았다.

const IssueItem = memo(({ issue }) => {
  console.log('issueItem');
  const { dispatch } = useContext(IssuesContext);

  const onCheckBoxChange = (e) => {
    if (e.target.checked) {
      dispatch({ type: CHECK_ISSUE, id: issue.id });
    } else {
      dispatch({ type: UNCHECK_ISSUE, id: issue.id });
    }
  };

  return useMemo(() => {
    console.log('memo');
    return (
      <>
        <IssueItemWrapper>
          <input
            type="checkbox"
            onChange={onCheckBoxChange}
            checked={issue.checked}
          />
          <IssueLogo issueState={issue.state} />
          <IssueContent issue={issue} />
        </IssueItemWrapper>
      </>
    );
  }, [issue.checked, issue]);
});

최종 결과

console.log로 useMemo 부분에다가 로그를 남겨놨는데,
사진처럼 10개의 IssueItem 중에 체크한 IssueItem만 memo 로그가 찍히는 것을 볼 수 있다.
즉, IssueItem 자체는 다시 실행되긴 하지만, 렌더링하는 부분은 캐싱되어 실행되지 않는다고 볼 수 있을 것 같다.