01.12 React Component Rerendering 최적화
React.js 01.12. React Component Rerendering 최적화 리액트에서는 Virtual DOM을 사용하여 필요한 DOM만 업데이트한다 고 했는데, 왜 최적화가 필요할까? 리액트는 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 리렌더링된다. 여기에서 불필요한 리렌더링 이란 실제 웹 브라우저의 페이지에 나타난 DOM의 렌더링이 아니라 Virtual DOM에 하는 렌더링 을 의미한다. 리액트가 어떤 DOM을 변경할지 인지하려면 Virtual DOM에 모두 렌더링을 해야 한다. 이 과정에서 Virtual DOM에 하는 불필요한 리렌더링을 shouldComponentUpdate로 방지한다. 그러면 Virtual DOM에 렌더링하는 과정에서 render() 함수를 실행하지 않고, 이전에 썼던 DOM 정보를 그대로 사용하여 자원을 아낄 수 있다. 어떤 상황에서? 컴포넌트 배열이 렌더링되는 리스트 컴포넌트일때 리스트 컴포넌트 내부에 있는 아이템 컴포넌트일때 하위 컴포넌트 개수가 많으며, 리렌더링되지 말아야 할 상황에서도 리렌더링이 진행될 때 리스트를 렌더링할 때는 언제나 shouldComponentUpdate를 구현해 놓는 것을 습관화하는 것이 좋다.