리액트를 다루는 기술-11 (컴포넌트 성능 최적화)

많은 데이터 렌더링 하기

• listItem 하나를 리렌더링 하는데에 158.6ms 가 걸림
• 아이콘, 이미지를 사용하지 않아서 책보다는 적게 걸렸지만 대부분의 요소를 리렌더링 함

느려지는 원인

1. 리렌더링 발생 상황

• 자신이 전달받은 props가 변경될 떄
• 자신의 state가 바뀔 떄
• 부모 컴포넌트가 리렌더링 될 떄
• forcUpdate 함수가 실행될 때

2. 코드 리렌더링 과정

1. 할 일 체크를 하면 App 컴포넌트의 state 가 변경되면서 App 컴포넌트 리렌더링
2. 부모컴포넌트가 리렌더링 돼서 TodoList 컴포넌트 리렌더링
3. 그 안에있는 컴포넌트들도 리렌더링

3. 최적화 작업

• TodoListItem 을 매번 리렌더링 하지 않고 변경된 부분에 한해서 리렌더링 할 수 있도록 최적화 할 수 있음 (리렌더링 방지)

React.memo를 사용하여 컴포넌트 성능 최적화

1. 컴포넌트 리렌더링 방지

• props가 바뀌지 않으면 리렌더링도 하지 않도록 설정
• 클래스 : shouldComponent 함수 사용
• 함수 : React.memo 사용

💡 데이터가 100개를 넘지 않거나 업데이트가 자주 발생하지 않는다면 최적화를 반드시 해줄 필요는 없음

 

2. props 함수 바뀌지 않게 하기

• useState 함수형 업데이트
  • setState(prevState ⇒ prevState+1)
• useReducer 사용하기
  • useReducer(reducer, undefined, 초기값 함수)
  • 두번째 인자 undefined는 초가깂 함수를 처음 한번만 실행하기 위함

3. 리렌더링 문제

• React.memo를 사용해도 리렌더링이 계속 되는 문제가 발생
• 원인 파악
  • 리듀서 함수에서 계속해서 새로운 객체를 만들어 반환했기 때문에 전부다 변경됐다고 생각하여 리렌더링
  • mutable 하게 변경해야함
• 해결 방법
  • 기존의 객체를 복사하고 덮어 씌어야 함
  • React props 비교 알고리즘 찾아보기!

return todoList.map((todoInfo) => {
        const newTodoInfo = { ...todoInfo };

        if (todoInfo.id === Number(id)) {
          console.log(todoInfo);

          newTodoInfo.check = !todoInfo.check;
        }

        return newTodoInfo;

      });

return todoList.map((todoInfo) => {
				if (todoInfo.id === id) {
          console.log(todoInfo);

          return { ...todoInfo, check: !todoInfo.check };
        }

        return todoInfo;
      });

불변성의 중요성

• 기존의 값을 직접 수정하지 않으면서 새로운 값을 만들어 내는 것을 불변성을 치킨다고 함

react-virtualized 라이브러리

• 리스트 컴포넌트에서 스크롤 되기 전에 보이지않는 컴포넌트를 렌더링 하지 않고 크기만 차지하도록 할 수 있음