react - 불필요한 render 방지하여 최적화하기


react - 불필요한 render 방지하여 최적화하기

아래처럼 shouldComponentUpdate 을 적절히 사용하면 불필요한 render 를 방지하여 성능 최적화를 할 수 있다. 주석 // add 가 이전 포스트에서 추가된 내용이다. import React, { Component } from 'react'; class Book extends Component { state = { isEditing: false, title: '', price: 0 } // 동일 버튼을 수정,적용 이라는 2가지 의미로 쓰다보니 이전값을 trace 해야한다. // 이게 싫으면 수정, 적용 을 따로 버튼 만들고 각자 다른 핸들러를 두면 될듯하다. componentDidUpdate(prevProps, prevState) { const { info, updateHandler } = this.props // 수정버튼 클릭시, props 로 받은 값을 state 에 저장. if ( prevState.isEditing === false && this.state....


#react #shouldComponentUpdate

원문링크 : react - 불필요한 render 방지하여 최적화하기