Props

💡 지난 주에 Virtual Dom과 함께 렌더링, Props, State에 대해 알아봤었다. => 🔗링크 이번에는 리엑트의 재렌더링 조건 & 렌더링 성능 최적화에 대해서 다루고자 한다. 재렌더링 조건을 알아야 DOM에서 가장 비싼 작업인 Painting 과정을 줄이는, 즉, 렌더링 최적화에 신경을 쓸 수 있기 때문에 짧지만 알고 있어야 하는 중요한 개념이라고 볼 수 있다. 1. 리액트 재렌더링 조건 State (상태) 변경이 있을 때 새로운 props가 들어올 때 기존 props가 업데이트 됐을 때 부모 컴포넌트에서 받은 props의 참조값이 변경되면 그 props 를 받고 있던 자식 컴포넌트도 재렌더링 된다. 부모 컴포넌트가 재렌더링 될 때 부모 컴포넌트가 재렌더링 되면 부모 컴포넌트에 속해있는 자식..

💡 이전에는 그냥 '그렇구나.' 하면서 넘어갔던 DOM과 Virtual DOM의 개념적인 측면에서 접근하며 알아보면서 왜 Virtual DOM이 등장했는지 좀 더 깊게 알아볼 수 있는 시간이었습니다. 💡 불변성에 대해 이해하기 위해 기본형 데이터와 참조형 데이터를 다시 한 번 곱씹어 볼 수 있는 시간을 가졌습니다. 1. DOM 과 Virtual DOM(가상 DOM) DOM 에 대한 간단한 설명 후 Virtual Dom 이 왜 필요한지, 그리고 props와 state에 대해 얘기하고자 한다. 1.1 DOM ⚪ 먼저, 렌더링에 대해서 말하고자 한다. 렌더링이라는 것은 브라우저가 클라이언트가 시각적으로 볼 수 있도록 화면에 출력하는 단계를 의미한다. 이 렌더링이 가능하도록 브라우저는 기본적으로 렌더링 엔진이라..