jQuery 이벤트에서 window로 이벤트를 전달하고, React 컴포넌트 라이프사이클 이벤트에서 window에 이벤트 리스너를 연결하는 방식으로 구현할 수 있다. 다음 예제 코드에서 SliderValue 컴포넌트(ch06/slider/jsx/slider-value.jsx)를 살펴보자.

 

예제 코드 6.15 window를 이용한 jQuery 플러그인과의 통합

class SliderValue extends React.Component {
    constructor(props) {
        super(props)
        this.handleSlide = this.handleSlide.bind(this)
        this.state = {sliderValue: 0}
    }
    handleSlide(event) {
        this.setState({sliderValue: event.detail.ui.value})
    }
    componentDidMount() {
        window.addEventListener('slide', this.handleSlide) ---- handleSlide( )를 실행하도록 slide 이벤트 리스너를 window 객체에 연결한다.
    }
    componentWillUnmount() {
        window.removeEventListener('slide', this.handleSlide) ---- DOM 노드가 없어진 후 이벤트 핸들러로 인해 메모리 누수가 발생하지 않도록 window의 slide 이벤트에 대한 연결을 제거한다.
    }
    render() {
        return <div className="" >
            Value: {this.state.sliderValue}
        </div>
    }
}

---