React - React.memo

원시타입일 경우, React.memo

import { useReducer, useState } from 'react';
import Child from './Component/Child';

const App = () => {
  const [parentAge, setParentAge] = useState(0);
  const [childAge, setChildAge] = useState(0);

  const incrementParentAge = () => {
    setParentAge(parentAge + 1);
  };

  const incrementChildAge = () => {
    setChildAge(childAge + 1);
  }

  console.log('parent render');

  // 원시타입이므로 App이 랜더링되도 변경되지 않음
  const childName = '홍길동';
  
  return (
    <div style={{border: '2px solid navy', padding: '10px'}}>
      <h1>부모</h1>
      <p>age: {parentAge}</p>
      <button onClick={incrementParentAge}>부모 나이 증가</button>
      <button onClick={incrementChildAge}>자녀 나이 증가</button>
      <Child name={childName} age={childAge} />
    </div>
  )
};

export default App;

import React, {memo} from "react";

const Child = ({name, age}) => {

    console.log('child render');
    
    return(
        <div style={{border: '2px solid powderblue', padding: '10px'}}>
            <h3>자녀</h3>
            <p>name: {name}</p>
            <p>age: {age}</p>
        </div>
    )
};

// memo: 기존 컴포넌트를 받아 props의 변화가 있을 때만 랜더링하게 고차 컴포넌트를 반환
export default memo(Child);

객체타입일 경우, React.memo

• App이 랜더링 될 때 마다 childName객체가 새로 만들어지므로 주소가 달라짐
• Child 컴포넌트는 내용은 같아도 주소가 달라 변경으로 인지
• Child 컴포넌트도 계속 랜더링되는 문제

import { useReducer, useState } from 'react';
import Child from './Component/Child';

const App = () => {
  const [parentAge, setParentAge] = useState(0);

  const incrementParentAge = () => {
    setParentAge(parentAge + 1);
  };

  console.log('parent render');

  // 객체를 props로 전달해서 고차 컴포넌트여도 랜더링이 되어버림;;;
  const childName = {
        lastName: '홍',
        firstName: '길동',
  }

  return (
    <div style={{border: '2px solid navy', padding: '10px'}}>
      <h1>부모</h1>
      <p>age: {parentAge}</p>
      <button onClick={incrementParentAge}>부모 나이 증가</button>
      <Child name={childName} />  
    </div>
  )
};

export default App;

객체타입일 경우 useMemo Hook 사용

import { useMemo, useReducer, useState } from 'react';
import Child from './Component/Child';

const App = () => {
  const [parentAge, setParentAge] = useState(0);

  const incrementParentAge = () => {
    setParentAge(parentAge + 1);
  };

  console.log('parent render');

  // 객체를 props이므로 useMemo사용해서 메모리주소가 변하지 않게 하기
  const childName = useMemo(() => {
    return {
        lastName: '홍',
        firstName: '길동',
  };
  }, []);

  return (
    <div style={{border: '2px solid navy', padding: '10px'}}>
      <h1>부모</h1>
      <p>age: {parentAge}</p>
      <button onClick={incrementParentAge}>부모 나이 증가</button>
      <Child name={childName} />  
    </div>
  )
};

export default App;

함수일 경우, React.memo

• 함수도 객체타입과 동일

import { useMemo, useReducer, useState } from 'react';
import Child from './Component/Child';

const App = () => {
  const [parentAge, setParentAge] = useState(0);

  const incrementParentAge = () => {
    setParentAge(parentAge + 1);
  };

  console.log('parent render');

  const childName = '홍길동';

  // 함수는 객체의 한 종류이므로 App이 랜더링 될 때 마다 메모리 주소가 변경됨
  const tellMe = () => {
    console.log("hi 길동");
  };

  return (
    <div style={{border: '2px solid navy', padding: '10px'}}>
      <h1>부모</h1>
      <p>age: {parentAge}</p>
      <button onClick={incrementParentAge}>부모 나이 증가</button>
      <Child name={childName} tellMe={tellMe} />  
    </div>
  )
};

export default App;

함수일 경우 useCallback Hook 사용

import { useCallback, useMemo, useReducer, useState } from 'react';
import Child from './Component/Child';

const App = () => {
  const [parentAge, setParentAge] = useState(0);

  const incrementParentAge = () => {
    setParentAge(parentAge + 1);
  };

  console.log('parent render');

  const childName = '홍길동';

  // 함수는 useCallback을 사용해서 메모리주소가 변하지 않게 하기
  const tellMe = useCallback(() => {
    console.log("hi 길동");
  }, []); 

  return (
    <div style={{border: '2px solid navy', padding: '10px'}}>
      <h1>부모</h1>
      <p>age: {parentAge}</p>
      <button onClick={incrementParentAge}>부모 나이 증가</button>
      <Child name={childName} tellMe={tellMe} />  
    </div>
  )
};

export default App;