PureComponent와 memo

https://ko.reactjs.org/docs/react-api.html

React.PureComponent

React.PureComponent는 React.Component와 비슷합니다. React.Component는 shouldComponentUpdate()를 구현하지 않지만, React.PureComponent는 props와 state를 이용한 얕은 비교를 구현한다는 차이점만이 존재합니다.
React 컴포넌트의 render() 함수가 동일한 props와 state에 대하여 동일한 결과를 렌더링한다면,
React.PureComponent를 사용하여 경우에 따라 성능 향상을 누릴 수 있습니다.

shouldComponentUpdate - props와 state 얕은 비교하여 업데이트 할지 말지 결정하는 것인데 
PureComponent는 이것을 구현한다.
따라서 PureComponent는 props와 state가 같으면 업데이트 하지 않음으로써 성능개선 할 수 있다.

 

class HabitAddForm extends PureComponent {
  //PureComponent 얕은비교해서 바뀌면 리렌더
  inputRef = React.createRef();
  formRef = React.createRef();
  
  onSubmit = (event) => {
    event.preventDefault();
    const name = this.inputRef.current.value;
    name && this.props.onAdd(name);
    // this.inputRef.current.value= '';
    this.formRef.current.reset();
  };

  render() {
    console.log('habitAddForm');
    return (
      <form ref={this.formRef} className='add-form' onSubmit={this.onSubmit}>
        <input
          ref={this.inputRef}
          type='text'
          className='add-input'
          placeholder='Habit'
        />
        <button className='add-button'>Add</button>
      </form>
    );
  }
}

export default HabitAddForm;

 

 

 

import React, { PureComponent } from 'react';
import { memo } from 'react/cjs/react.production.min';
// habitAddForm은 state따로 없고 onAdd를 props로 받는다
// app에서 전달된 HandleAdd는 클래스 한번 만들어질때 할당된 뒤로 다시업데이트 되지 않는 함수
// (PureComponent이거나 memo 사용했을때 , 얕은비교해서 바뀐것 없으므로) 리렌더 되지 않음

const HabitAddForm = memo((props) => {
  //PureComponent 얕은비교해서 바뀌면 리렌더
  const inputRef = React.createRef();
  const formRef = React.createRef();

  const onSubmit = (event) => {
    event.preventDefault();
    const name = inputRef.current.value;
    name && props.onAdd(name);
    //inputRef.current.value= '';
    //둘중 하나
    formRef.current.reset();
  };

  return (
    <form ref={formRef} className='add-form' onSubmit={onSubmit}>
      <input
        ref={inputRef}
        type='text'
        className='add-input'
        placeholder='Habit'
      />
      <button className='add-button'>Add</button>
    </form>
  );
});
export default HabitAddForm;

 

 

 

• memo는 렌더링이 오래걸리는 자식컴포넌트를 memo로 감싸 꼭 필요한 경우에만 렌더링되도록 하는것.
  memo는 기존 props와 비교해서 props 다를 때만 렌더링 .
  (props가 길고 복잡하면 memo가 불리할 수 있다.)
• 클래스 컴포넌트를 함수 컴포넌트로 전환할 때 PureComponent를 memo를 사용하여 전환한다.