서론 학습 목표 📖 React.memo() 를 스마트하게 사용이 가능해진다. 본론 Re-render 브라우저가 렌더링 되고 난 후에 레이아웃을 변경했을때 브라우저는 다시 렌더링을 하게 된다. 이 과정에서 리플로우 그리고 리페인트가 발생하게 된다. 리액트에서 컴포넌트간 Props로 데이터를 전달한 후 상위 컴포넌트에서 Props가 변경 되었을때 하위 컴포넌트에서 무조건 렌더링을 다시 하게 된다. 특이한 점은 상위 컴포넌트에서 파생된 모든 하위 컴포넌트에서 렌더링 후 DOM 업데이트가 다시 발생한다는 것이다. 아주 간단한 코드를 보면서 바로 이해해보자. 크롬 브라우저에서 리액트 데브 툴을 열고 Props에서 이름="존" 으로 변경하면 Child2도 재렌더링되어 '렌더링됨2'이 로그에 찍히는것을 볼 수 있다. 그럼 Child1만 DOM에 업데이트 되게 하려면 어떻게 해야 할까? React.memo() 란? 리액트에서는 변경된 바로 그 컴