서녕이네 개발단지

리액트 렌더링의 동작원리에 대해 포스팅 중인데.. 아니 너무 많다..^^ 뭐가 너무 많아.. 양파 같아 정말😞 여태 리액트에 대해 아무것도 모르고 있었구나 라는 생각이 많이 든다. 그런 의미에서 반성하며 다시 포스팅 끄적여야지 이번 포스팅은 지난번에 적은 렌더링 동작원리(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의 변화를 ..