성능2 [Javascript - 성능] DOM 렌더링 방식에 따른 성능 비교해보기 - 1 ✅ DocumentFragment이란?DocumentFragment란 Dom 노드를 임시로 구성할 수 있는 가벼운 컨테이너이다. Document와는 달리 DocumentFragment는 메모리상에서만 존재하지 때문에 DocumentFragment로 구성된 트리를 변경하더라도 리플로우가 발생하지 않는다. 이러한 특징을 가진 DocumentFragment를 활용해서 DocumentFragment의 트리에서 DOM 조작을 완료한 후 한번에 실제 DOM에 적용함으로써 리플로우를 최소하하여 성능을 향상시킬 수 있다고 알고있었다. 그래서 이번에 실제로 DocumentFragment를 활용하는 방법과 일반적인 append 메서드를 활용하는 방법의 속도차이를 알아보려고 한다. 💾 예제DOM을 조작하는 예제는 다음과.. 2025. 6. 22. [React] Context API 성능개선 🎈 간단 설명Context API는 리액트 라이브러리에 내장 된 API로, 중첩된 컴포넌트에서 부모 컴포넌트의 상태를 자식 컴포넌트에게 좀 더 쉽고 간편하게 전달하기 위해서 제공된다. Context의 값이 변경되는 경우 동일한 Context를 사용하는 모든 컴포넌트에서 리렌더링 되는 문제가 존재한다. 👓 Context API 성능 개선의 오해구글에서 Context API의 성능 문제 해결로 검색해보면 React.memo 또는 useCallback, useMemo를 사용하면 성능 개선이 된다는 글이 많이 보인다. 그래서 나는 React.memo 또는 useCallback, useMemo 를 사용하면, 위에서 동일한 Context를 사용하는 경우에 대한 문제를 해결할 수 있을 거라고 오해했었다. 다음.. 2025. 2. 15. 이전 1 다음
