서녕이네 개발단지

📄목차 1. 렌더링이란? 1-1. 렌더링 규칙 2. 렌더링 과정(동작 원리) 2-1. DOM에 element 렌더링 하기 2-2. React Element 3. 재조정 (Reconciliation) 3-1. Diffing Algorithm(비교 알고리즘) 1. 렌더링(rendering)이란? - 현재 props 및 상태를 기반으로 리액트가 컴포넌트에게 UI 영역이 어떻게 보이길 원하는지 설명을 요청하는 프로세스이다. 💡간단히 말해, 코드로 정의된 내용이 실제 브라우저 화면에 그려지는 과정을 의미한다. 리액트는 이때 컴포넌트의 props와 state를 기반으로 UI를 만든다. ❗️ 주의사항 ❗️ 1. props의 변화로 인해 렌더링이 이루어지는 것이 아니다. 2. 렌더링이 이루어진 후 props의 변화를 ..

1. 개요 리액트 공부를 하고, 프로젝트를 한지 약 반년이란 시간이 지났다. Virtual Dom이 뭔지 대략적으로만 알고 있었지 이렇게 자세히 공부하기는 처음이다.. 그만큼 리액트에 대해 잘 모른 채 사용해 왔던 것.🥲 기술 블로그를 시작하며, 리액트에 대해 처음부터 심도 있게 알아가 보고자 한다. 이번 포스팅은 리액트의 특징 중 하나인 Virtual Dom (가상 돔)을 알아보겠다. 2. Dom 이란? DOM(Document Object Model)을 영어 뜻풀이 그대로 하자면 문서 객체 모델을 의미한다. 문서 객체란❓ , , ... 와 같은 태그들을 javascript가 접근할 수 있도록 객체로 만든 것 (메모리에 보관할 수 있는)을 의미한다. 즉, 웹 페이지에 대한 인터페이스이다. DOM은 웹 페..