본문 바로가기

🔥React 뽀개기11

리액트는 왜 얕은 비교를 하는가? 모던 리액트 딥다이브 책 읽으면서 얕은 복사에 대한 내용이 이해가 되지 않았다. 얕은 복사를 하는 이유가 props만 일차적으로 비교하면 된다고만 나와있었다.. 설명이 부족해 이해가 안 돼서 얘를 붙잡고 쥰내 파보겠다. 꼬꼬무 느낌으로 정리해보겠다.  리액트에서 렌더링을 하면 객체는 주소가 바뀐다. ❓그럼 원시값은안 바뀐다. ❓왜원시값는 불변성이니까.객체는 가변성이라 참조에 의해 비교된다. 리액트는 객체가 바뀌면 새로운 객체로 인식해서 불필요한 렌더링을 한다. (즉, 성능이 떨어짐)이를 방지하고자 useMemo or React.memo or 불변성유지(기존객체를 복사해 필요한 부분만 변경)를 한다. 여기서 불변성 유지, 기존객체를 복사해 필요한 부분만 변경, 이것이 얕은 복사 얘기다.리액트는 가상돔을 쓴.. 2024. 5. 30.
리액트 왜 씀? ❓리액트란...Facebook에서 개발한 JavaScript 기반의 오픈소스 라이브러✨특징가상 DOM과 동기화되어 변경 사항을 효율적으로 감지하고 업데이트한다.재사용 가능한 컴포넌트를 이용해 UI를 구성한다.데이터 흐름이 단방향으로 이루어진다.JSX 문법을 사용해 코드 가독성을 높인다.리액트를 배우기 앞서서 알아야 할 것.❓DOMDocument Object Model의 약자. -> 문서 객체 모델DOM은 HTML 문서를 파싱해서 문서의 객체 모델을 생성한다.[브라우저 렌더링 과정]HTML 파싱:HTML 문서를 파싱하여 DOM 트리를 생성CSS 파싱:CSS 파일이나 스타일 태그의 내용을 파싱하여 스타일 규칙을 생성렌더 트리 구성:DOM 트리와 CSSOM(스타일 트리)을 결합하여 렌더 트리를 생성레이아웃:렌.. 2024. 5. 27.
반응형