React.memo

컴포넌트 수준에서 렌더링 최적화를 위한 HOC

useMemo와 이름만 유사, 같은게 아님

컴포넌트의 렌더링에 앞서 props를 비교하여 이전과 같은 props면 렌더링을 생략하고 기억해 둔(memoization) 컴포넌트를 반환

주로 부모-자식 컴포넌트 간에 발생하는 리렌더링에 많이 사용

const ChildComponent = ({ value }: { value: string }) => {
  useEffect(() => {
    console.log('렌더링!');
  });

  return <>안녕하세요! {value}</>;
};

// 자식 컴포넌트의 props 변경 여부와 관계없이 
// 부모 컴포넌트에서 리렌더링이 발생해 자식도 따라서 리렌더링 유발
// 부모에서 리렌더링이 발생하는 이유는 handleChange의 setState 때문에 발생
function ParentComponent() {
  const [state, setState] = useState(1);

  function handleChange(e: ChangeEvent<HTMLInputElement>) {
    setState(Number(e.target.value));
  }

  return (
    <>
      <input type="number" value={state} onChange={handleChange} />
      <ChildComponent value="hello" />
    </>
  );
}

import React, { memo } from 'react';

const ChildComponent = memo(({ value }: { value: string }) => {
  useEffect(() => {
    console.log('렌더링!');
  });

  return <>안녕하세요! {value}</>;
});

• useMemo로 React.memo와 같은 걸 구현 가능
  - ❗다만 리뷰시 혼동이 올 수 있으므로 컴포넌트 렌더링 최적화가 목적이라면
  의도가 보다 분명한 React.memo 권장

  function ParentComponent() {
  	const [state, setState] = useState(1)
  	
  	function handleChange(e: ChangeEvent<HTMLInputElement>) {
  	  setState(Number(e.target.value));
  	}
  
  	const MemoizedChildComponent = **useMemo**(() => {
  	  return <ChildComponent value="hello" />;
  	}, []);
  
  	return (
  	  <>
  	    <input type="number" value={state} onChange={handleChange} />
  	    {MemoizedChildComponent}
  	  </>
  );
  
  }

  Ref

• https://react.dev/reference/react/memo