본문 바로가기

react2

Virtual Dom이란 무엇인가? Virtual Dom이란 무엇인가? Virtual Dom에 대해 알아보기 전, 먼저 DOM의 기본 개념에 대해서 알아보자 DOM(Document Object Model) 각 Element(HTML)들을 담고 있는 웹페이지를 Document라고 하는데, 이를 브라우저는 분석해 페이지를 띄워준다. DOM이란 이런 HTML element들을 tree형태로 표현한 것이다. Virtual DOM Virtual DOM은 실제 DOM과 같은 내용을 담고 있는 복사본이라고 생각하면 쉽다. 복사본은 실제 DOM이 아닌 JS 객체 형태로 메모리 안에 저장되어 있다. Virtual DOM은 실제 DOM의 복사본이기 때문에, 실제 DOM의 모든 element과 속성을 공유한다. 차이점은 브라우저에 있는 문서에 직접적으로 접근.. 2024. 4. 2.
Suspense란 무엇인가 React Spense란 무엇인가? 를 사용하면 자식이 로딩을 완료할 때까지 폴백을 표시할 수 있다. 기본 사용법 여기서 fallback은 로딩이 완료되지 않은 경우 실제 UI 대신 렌더링 할 대체 UI라는 뜻이다. 유효한 어떤 React 노드든 사용가능하며, 주로 로딩 스피너나 스켈레톤 같은 가벼운 플레이스홀더 뷰를 사용한다. Suspense는 children이 일시 중단되면 자동으로 fallback으로 전환되고, 데이터가 준비되면 다시 children으로 전환된다. 렌더링 중 fallback이 일시 중단되면 가장 가까운 상위 Suspense 경계가 활성화된다. 아래 예시에서 앨범 목록을 가져오는 동안 Albums 컴포넌트가 일시 중단된다. 렌더링할 준비가 될 때까지 React는 가장 가까운 상위 Su.. 2024. 3. 7.