더북(TheBook)

6.3 React를 다른 라이브러리와 통합하기: jQuery UI 이벤트

 

앞서 살펴본 것처럼 React는 표준 DOM 이벤트를 제공한다. 그렇지만 만약에 비표준 이벤트를 사용하는 라이브러리와 통합해야 한다면 어떻게 해야 할까? 예를 들어 슬라이더 제어 요소처럼 슬라이드를 사용하는 jQuery 컴포넌트가 있다고 가정해보자. React 위젯을 jQuery 앱에 통합하려고 한다. React에서 제공하지 않는 DOM 이벤트는 컴포넌트 라이프사이클 이벤트인 componentDidMountcomponentWillUnmount에서 등록할 수 있다.

라이프사이클 이벤트의 종류를 보면 알 수 있겠지만, 컴포넌트가 마운팅된 후에 이벤트 리스너를 등록했다가 언마운팅할 때 제거한다. 이벤트 리스너 제거는 청소라고 할 수 있는데, 이벤트 리스너를 제대로 제거하지 않으면 충돌을 일으키거나 성능 문제를 일으킬 수도 있으므로 중요한 작업이다(이벤트 핸들러를 등록한 DOM 노드가 없으면 잠재적으로 메모리 누수의 위험이 있다).

예를 들어 음악 스트리밍 회사에서 근무하면서 새로운 버전의 웹 플레이어(Spotify나 iTunes를 떠올려보자)에 쓸 음량 조절기를 구현한다고 가정해보자. 오래된 jQuery 슬라이더(http://plugins.jquery.com/ui.slider)에 버튼과 라벨을 추가해야 할 것이다.

신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.