ToDoList Web(3)

👍 프로젝트 최적화 방법
-> 프로젝트 규모가 커질수록 컴포넌트 리렌더링 최적화를 하지 않으면 리렌더링되는 과정에서 버퍼링이 발생할 수 있다.

1. 리액트에서는 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 리렌더링 됨.

2. 작은 프로젝트에서는 상관이 없으나, 규모가 커질수록 불필요한 리렌더링을 막아야 함.

3. 여기서 불필요한 리렌더링은 실제 유저에서의 DOM 렌더링X, Virtual DOM에서의 렌더링을 의미.

4. HOW? : shouldComponentUpdate로 방지.

🧨 최적화 1 : TodoList

• TodoList 컴포넌트는 todos props를 바꿀 때만 리렌더링 되어야 함.
• todos 값을 바꿀떄만 컴포넌트에 업데이트하도록 shouldComponentUpdate 메서드 넣어줌.

TodoList.js

shouldComponentUpdate(nextProps, nextState){
        return this.props.todos !== nextProps.todos;
    }

🧨 최적화 2 : TodoItem

• todos 배열을 실제로 업데이트하는 상황이라 TodoList에서 shouldComponentUpdate가 도움이 되지 않음.
• TodoItem에서 최적화를 진행해줘야 함.
• TodoItem이 리렌더링되어야 하는 경우는 done이 바뀔 때 뿐.

TodoItem.js

  shouldComponentUpdate(nextProps, nextState){
    return this.props.done!==nextProps.done;
  }

😊 정리

• 어떤 상황에서 shouldComponentUpdate를 구현해야 할까?

1. 컴포넌트 배열이 렌더링되는 리스트 컴포넌트일 때.
2. 리스트 컴포넌트 내부에 있는 아이템 컴포넌트일 때.
3. 하위 컴포넌트 개수가 많으며, 리렌더링되지 말아야 할 상황에서도 리렌더링이 진행될 때.

참고 : <리액트를 다루는 기술>