shouldComponentUpdate를 이용한 최적화

컴포넌트의 prop이나 state가 변경되면 React는 새로 반환된 엘리먼트를 이전에 렌더링된 엘리먼트와 비교해서 실제 DOM 업데이트가 필요한지 여부를 결정하는데 같지 않을 경우 React는 DOM을 업데이트합니다.

• render이전에 shouldComponentUpdatet실행
• 변경이 없으면 false -> render가 호출안됨
• shouldComponentUpdate를 통해 이전값과 현재값(props)을 접근 가능함.

import React, { Component } from 'react';
import '../App.css';
class Toc extends Component {
  

  shouldComponentUpdate(newProps, newState) {
    console.log('=======>', newProps.data, this.props.data);
    if (this.props.data === newProps.data) {
      return false; //렌더링 하지 않음.
    }
    return true;
  }
  render() {
    let lists = [];
    let data = this.props.data; //컴포넌트는 내부적으로 this.props.data를 가짐
    let i = 0;
    while (i < data.length) {
      lists.push(
        <li key={data[i].id}>
          <a
            href={'/content/' + data[i].id}
            data-id={data[i].id} //HTML5부터 data-** 속성값을 이용하여 data 저장
            onClick={function (e) {
              //debugger;
              e.preventDefault(); //다른 페이지로 이동x
              this.props.onChagePage(e.target.dataset.id);
              //App 컴포넌트의 onChangePage(data-로 저장된 변수)함수 실행
            }.bind(this)}
          >
            {data[i].title}
          </a>
        </li>
      );
      i = i + 1;
    }
    return (
      <nav>
        <ul>{lists}</ul>
      </nav>
    );
  }
}
export default Toc;