react-dev-tools로 컴포넌트 구조를 확인하거나 렌더링 프로파일링 가능

버벅거리거나 시간이 오래걸리는 경우 속도를 측정해보고 shouldComponentUpdate를 이용하여 불필요한 렌더링을 방지한다.

// TodoList.js

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

// TodoItem.js

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

shouldComponentUpdate을 구현하는 것을 습관화 하자.

주로 다음 상황일 때 리렌더링 최적화가 필요하다.

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

리덕스 개념 이해