jQuery 슬라이더에서 값이 바뀌어 slide 이벤트가 발생하면, 버튼에 있는 텍스트 값을 변경해야 한다. componentDidMount에 jQuery 슬라이더에 대한 이벤트 리스너를 등록한 후, slide 이벤트가 발생하면 React 컴포넌트에 있는 handleSlide() 메서드를 실행한다. slide 이벤트와 값 변경에 따라 sliderValue 상태 값을 변경한다. 다음 예제는 이런 방식으로 구현한 SliderButtons이다(ch06/slider/jsx/slider-buttons.jsx).

 

예제 코드 6.13 jQuery 플러그인의 이벤트를 이용한 통합

class SliderButtons extends React.Component {
    constructor(props) {
        super(props)
        this.state = {sliderValue: 0} ---- 초깃값을 0으로 설정한다.
    }
    handleSlide(event, ui) {
        this.setState({sliderValue: ui.value}) ---- jQuery가 두 개의 인자를 전달한다: jQuery 이벤트와 현재 값을 가진 ui 객체로 상태를 변경할 때 사용한다.
    }
    handleChange(value) { ---- 버튼을 클릭했을 때 슬라이더를 갱신하기 위한 메서드를 정의한다.
        return () => { ---- 팩토리 함수 패턴을 이용해서 1씩 키우거나 감소시킨다.
            $('#slider').slider('value', this.state.sliderValue + value) ---- jQuery 메서드를 이용해서 새로운 값을 전달한다.
            this.setState({sliderValue: this.state.sliderValue + value})
        }
    }
    componentDidMount() {
        $('#slider').on('slide', this.handleSlide) ---- 새로운 값으로 상태를 갱신한다.
    }
    componentWillUnmount() {
        $('#slider').off('slide', this.handleSlide) ---- 언마운팅 시점에 이벤트 리스너를 제거한다.
    }
    ...
}

---