vdom 썸네일형 리스트형 [javascript] 리액트 같은 UI 라이브러리 개발 3 - 이벤트 처리 개선과 useReducer() 추가 들어가기지금까지는 이벤트를 처리할 때 DOM 속성에 직접 핸들러를 지정하는 방식을 사용했다. 이 방식은 이벤트가 중접 등록되는 것을 방지하기 위할 수 있는 장점이 있지만, 다양한 이벤트 처리를 유연하게 관리하기에는 제약이 많다. 좀 더 확장성 있고 체계적인 이벤트 관리를 위해 addEventListener() 기반의 구조가 더 적합하며, 이벤트 위임(Event Delegation)을 통해 이벤트 시스템을 개선하고자 한다. 또한 기존에는 각 컴포넌트마다 직접 상태를 수정했다. 단순한 상태는 문제 없지만, 상태 로직이 복잡해질수록 코드가 복잡하고 흩어져 있어 유지보수가 어려워진다. 이를 해결하기 위해 상태 관리 로직을 한곳에 관리할 수 있도록 useReducer()를 추가하였다.작성자: http://ospa.. 더보기 [javascript] 리액트 같은 UI 라이브러리 개발 1 - VDOM 만들기 들어가기리액트에서 가상 DOM을 활용한 효율적으로 DOM 관리하는 방법이 사용되고 있다. 평소에 가상 DOM에 대해서 관심있었고 어떻게 구현되는지 궁금했었다. 그러던중 한중일님의 글을 보고 직접 간단하게 구현해보고 정리해보았다. 여기서 만들려는 UI 라이브러리는 순수 브라우저에서 동작하는 라이브러리를 제작하는 목표를 가정하였다.작성자: http://ospace.tistory.com/ (ospace114@empal.com)DOMDOM은 Document Object Model로 웹 문서를 구조화된 모델로 표현하였다. 웹 문서는 다양한 구성요소가 있고 이런 구성 요소를 Node라고 하며 웹 요소를 조작할 수 있는 인터페이스를 제공한다.Node은 DOM에서 모델로 표현되는 구성 요소로 Document, Elem.. 더보기 이전 1 다음
