[React 기본] 함수형 컴포넌트의 PureComponent는? memo!

PureComponent개념보러가기

[React 기본] PureComponent란 ? (Component, PureComponent차이)

---

함수형 컴포넌트의 PureComponent == memo

기존소스

import React from 'react';

const HabitAddForm = (props) => {
  const formRef = React.createRef();
  const inputRef = React.createRef();

  const onSubmit = event => {
    event.preventDefault();
    
    const name = inputRef.current.value;
    name && props.onAdd(name);

    inputRef.current.value = '';
  }

  return (
    <form ref={formRef} className="add-form" onSubmit={onSubmit}>
      <input 
        ref={inputRef}
        type="text" 
        className="add-input"
        placeholder="hello"
      />
      <button className="add-button">Add</button>
    </form>
  ); 
};

export default HabitAddForm;

 

memo로 변경한 소스

import React, { memo } from 'react';

const HabitAddForm = memo((props) => {
  const formRef = React.createRef();
  const inputRef = React.createRef();

  const onSubmit = event => {
    event.preventDefault();
    
    const name = inputRef.current.value;
    name && props.onAdd(name);

    inputRef.current.value = '';
  }

  return (
    <form ref={formRef} className="add-form" onSubmit={onSubmit}>
      <input 
        ref={inputRef}
        type="text" 
        className="add-input"
        placeholder="hello"
      />
      <button className="add-button">Add</button>
    </form>
  ); 
});

export default HabitAddForm;

사용법은 앞에 memo로 함수를 감싸주면 된다.