[React.memo, useCallback]렌더링최적화 - component단위로 가능

리액트 컴포넌트는 기본적으로 부모컴포넌트가 리렌더링되면 자식 컴포넌트 또한 리렌더링이 됩니다. 바뀐 내용이 없다 할지라도요.

물론, 실제 DOM 에 변화가 반영되는 것은 바뀐 내용이 있는 컴포넌트에만 해당합니다. 하지만, Virtual DOM 에는 모든걸 다 렌더링하고 있다는 겁니다.

나중에는, 컴포넌트를 최적화 하는 과정에서 기존의 내용을 그대로 사용하면서 Virtual DOM 에 렌더링 하는 리소스를 아낄 수도 있습니다. 이것은 다음번에 알아볼게요. -> useCallback, React.memo 사용

 

아래와 같이 component를 React.memo로 감싸주고 useCallback사용해야함

export default React.memo(CreateUser);

https://react.vlpt.us/basic/19-React.memo.html

19. React.memo 를 사용한 컴포넌트 리렌더링 방지 · GitBook