JS UI 라이브러리를 instance로 만들어 React 이식하기 (with useImperativeHandle & Tui Grid) 💘

가끔 좋은 JS 라이브러리를 발견해서 써보려고 했는데, 해당 라이브러리가 직접 React를 지원하지 않는 경우들이 있다.이런 경우에 UI 컴포넌트 instance를 생성해서 React에 직접 연결해주는 작업이 필요한데, 이를 어떻게 잘 할 수 있을지 고민해보았다 😃(이런 경우는 인스턴스를 직접 컨트롤해야 하는 UI 컴포넌트가 많아서 더욱 고민이 필요하다) 보통 React에서는 useRef를 통해서 인스턴스를 관리하는데, 여기에 추가로 useImperativeHandle을 활용해 Tui Grid를 React에서 자연스럽게 사용하는 예제를 한번 만들어 보았다.(tui는 react 까지 레핑된 라이브러리를 하긴 하는데.., 유지보수가 멈췄다 🤣)1️⃣ 기본적인 그리드 설정Tui Grid는 JavaScrip..

• format_list_bulleted JavaScript
• · 2025. 4. 1.
• textsms

animation 성능 향상 (requestAnimationFrame)

reflow, repaint로 인한 성능저하를 막기 위해서 GPU를 사용하여 애니메이션을 작업하는 것이 좋다. GPU를 사용하는 편이 더 부드러운 애니메이션을 보여줄 수 있기 때문이다. (CPU보다 더 많은 core를 가지기에 단순 작업에 적합하다 / GPU의 하드웨어 가속 기능) 그 방법중 하나인 requestAnimationFrame 메서드에 대해서 알아보았다. 원이 좌우로 이동하는 requestAnimationFrame 예제이다. https://developer.mozilla.org/ko/docs/Web/API/window/requestAnimationFrame Window: requestAnimationFrame() method - Web API | MDN 화면에 애니메이션을 업데이트할 준비가 될..

• format_list_bulleted 기타
• · 2023. 9. 4.
• textsms