to do list 만들기_7 (컴포넌트 최적화)

컴포넌트 최적화

이 프로젝트는 간단하기에 최적화를 할 필요는 없지만 공부를 위해 🔥🔥

자원 낭비되는 부분을 없애기 위한 컴포넌트 최적화

👉값을 입력할 때 마다 render 함수가 실행됨

👉DOM에 변화가 일어나는 것은 아니지만 가상DOM에 rendering하는 자원이 미세하게 낭비되고 있음

 

src/components/ToDoItemList.js

import React, { Component } from 'react';
import ToDoItem from './ToDoItem';

class TodoItemList extends Component {

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

  render() {
    const { todos, onToggle, onRemove } = this.props;

    const todoList = todos.map(
      ({id, text, checked}) => (
        <ToDoItem
          id={id}
          text={text}
          checked={checked}
          onToggle={onToggle}
          onRemove={onRemove}
          key={id}
        />
      )
    );

    return (
      <div>
        {todoList}    
      </div>
    );
  }
}

export default ToDoItemList;

 

src/components/ToDoItem.js

import React, { Component } from 'react';
import './ToDoItem.css';

class ToDoItem extends Component {

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

  render() {
    (...)
  }
}

export default ToDoItem;