루루의 우당탕탕 개발 스토리 루루의 우당탕탕 개발 스토리

React 앱의 마운트 과정 1. 함수 컴포넌트 호출 2. 구현부 실행 - props 취득, hook 실행, 내부 변수 및 함수 생성 - 이 때 hook에 등록해 둔 상태값, 부수함수 효과등은 별도 메모리에 저장되어 관리된다. (useMemo, useCallback등을 활용한 케이스) cf. useMemo vs useCallback 차이 및 각각의 특징과 언제쓰는지에 대한 포스팅 3. return 실행 - 렌더링 단 4. 렌더 단계 (렌더 트리 구축) - 새로운 가상 Dom 생성 후, 이전 가상 DOM과 비교하여 달라진 부분을 탐색하고 실제 DOM에 반영할 노드들을 결정한다. - DOM 트리에 있어도 display: none 속성이 있거나 head등 표시되지 않는 태그의 경우 화면에 표시되지 않을 수 있..

React Virtual Dom 과거에 React는 Virtual Dom을 사용하여 브라우저가 렌더링할 때, 이전 Dom과 현재의 Dom에서 변경내역을확인하여 실제 Dom에 반영할 부분을 결정한다. 이 때, 여기에서 궁금증이 들었다. 가상돔은 새로운 돔의 커밋 내역을 어떤 기준으로 확인하여 변경 내역을 비교하는 것일까? 정답은 얕은 비교이다. React는 노드를 비교할 때 얕은 비교를 한다. React의 얕은 비교는 같은 레벨에서만 일어난다. 숫자, 문자열, boolean과 같은 원시 자료형은 값 비교를 수행한다. 배열, 객체 등 참조 자료형은 그 안의 값 혹은 attribute를 비교하지 않고, 그들의 레퍼런스(참조되는 위치)를 비교한다. 실제로 React는 상태 값을 업데이트할 때에도 얕은 비교를 수..