react.memo React.memo와 useMemo 차이점 React.memo React.memo는 Higher-Order Components(HOC)이다. 👀 Higher-Order Components(HOC)란 컴포넌트를 인자로 받아 새로운 컴포넌트롤 다시 return해주는 함수이다. const NewComponent = higherOrderComponent(WrappedComponent); 일반 컴포넌트는 인자로 받은 props를 UI에 활용하는 반면에, higher-order component는 인자로 받은 컴포넌트를 새로운 별도의 컴포넌트로 만든다. HOC는 리액트의 API가 아니라 리액트가 컴포넌트를 구성하는데 있어서의 일종의 패턴이라고 보면된다. React.memo의 사용법은 다음과 같다. const MyComponent = React.memo((p.. 더보기 모든 컴포넌트에 React.memo를 사용해도 되나요? React.memo DOM을 업데이트할 때 리액트는 컴포넌트를 렌더링 한 후, 이전 렌더링의 결과와 비교한다. 그러고 나서 결과가 다르다면, 리액트는 DOM을 업데이트한다. 이 비교 과정은 속도가 굉장히 빠르긴 하지만 React.memo를 사용해서 좀 더 빠르게 진행시킬 수 있다. 컴포넌트가 React.memo로 래핑되어있다면 리액트는 컴포넌트를 렌더링 하고, 결과를 기억한다. 그다음 렌더링이 일어나기 전에 만약 컴포넌트의 props가 동일하다면 리액트는 기억된 내용을 다시 재사용한다. 즉, React.memo가 사용된 컴포넌트는 props가 변경되지 않으면 다시 리 렌더링되지 않기 때문에 불필요한 렌더링을 방지할 수 있다. React.memo를 사용해야 하는 경우 1. 순수 함수 컴포넌트 컴포넌트가 함.. 더보기 이전 1 다음