서녕이네 개발단지

리액트 렌더링의 동작원리에 대해 포스팅 중인데.. 아니 너무 많다..^^ 뭐가 너무 많아.. 양파 같아 정말😞 여태 리액트에 대해 아무것도 모르고 있었구나 라는 생각이 많이 든다. 그런 의미에서 반성하며 다시 포스팅 끄적여야지 이번 포스팅은 지난번에 적은 렌더링 동작원리(1)에 이은 2편을 적을 예정이다. 📄 목차 1. 재귀적 처리 2. key diff 3. Fibers 3-1. Fiber의 구조 1. 재귀적 처리 - DOM 노드의 자식들을 재귀적으로 처리할 때, React는 기본적으로 동시에 두 리스트를 순회하고 차이점이 있으면 변경된 부분을 갱신한다. 아래 코드들은 react 문서에서 가져왔다. // 전 DOM first second // 후 DOM first second third 위에서부터 비교하..

📄목차 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은 웹 페..