2019-09-03

tec / react

6분 읽기 (나에 대하여 834 단어)

[React 교과서] 6장 React 에서 이벤트 다루기

리엑트 교과서를 정리한 내용입니다.

6.1 React에서 DOM이벤트 다루기

아래 예제 코드는 이벤트 리스너에서 this를 콘솔에 표시하도록 한 코드. 여기서 event 객체는 내장 DOM이벤트를 객체를 개선한 것으로 합성 이벤트라고 부름

<button onclick={(function(event){
    console.log(this.event)
}).bind(this)}>
Save
</button>

아래 경우에 bind(tnis)로 바인딩하지 않는다.

this를 이용해서 해당 클래스를 참조 할 필요가 없을때
ES6+ 클래스 대신 예쩐방식인 React.createClass()를 사용할때. 이때는 createClass()가 자동으로 바인딩함.
화살표 함수(() => {})를 사용할 때

Reaact버전 15에서 지원하는 DOM 이벤트

이벤트 분류	React가 지원하는 이벤트
마우스 이벤트	onClick, onContentMenu, onDoubleClick, onDrag, onDragEnd, onDragEnter, onDragExit, onDragLeave, onDragOver, onDragStart, onDrop, onMouseDown, onMouseEnter, onMouseLeave, onMouseMove, onMouseOut, onMouseOver, onMouseUp
키보드 이벤트	onKeyDown, onKeyPress, onKeyup
클립보드 이벤트	onCopy, onCut, onPaste
폼 이벤트	onChange, onInpute, onSubmit, onTnvalid
포커스 이벤트	onFocus, onBlur
터치 이벤트	onTouchCancel, onTouchEnd, onTouchMove, onTouchStart
UI이벤트	onScroll
휠 이벤트	onWheel
영역선택 이벤트	onSelect
이미지 이벤트	onLoad, onError
애니메이션 이벤트	onAnimationStart, onAnimationEnd, onAnimationIteration
트랜지션 이벤트	onTransitionEnd

6.1.1 캡쳐 및 버블링 단계

class Mouse extends React.Component {
  render() {
    return <div>
      <div
        style={{border: '1px solid red'}}
        onMouseOverCapture={((event)=>{
          console.log('mouse over on capture event')
          console.dir(event, this)}).bind(this)}
        onMouseOver={((event)=>{
          console.log('mouse over on bubbling event')
          console.dir(event, this)}).bind(this)} >
          Open DevTools and move your mouse cursor over here
        </div>
    </div>
  }
}

6.1.2 React이벤트 살펴보기

6.1.3 React 합성 이벤트 객체 다루기

class Mouse extends React.Component {
  render() {
    return <div>
      <div
        style={{border: '1px solid red'}}
        onMouseOver={((event)=>{
          console.log('mouse is over with event')
          console.dir(event)}).bind(this)} >
          Open DevTools and move your mouse cursor over here
        </div>
    </div>
  }
}

6.1.4 이벤트와 상태 사용하기

class Content extends React.Component {
  constructor(props) {
    super(props)
    this.state = {counter: 0}
  }
  handleClick(event) {
    this.setState({counter: ++this.state.counter})
  }
  render() {
    return (
      <div>
        <button
          onClick={this.handleClick.bind(this)}
          className="btn btn-primary">
          Don't click me {this.state.counter} times!
        </button>
      </div>
    )
  }
}

6.1.5 이벤트 핸들러를 속성으로 전달하기

class ClickCounterButton extends React.Component {
  render() {
    return <button
      onClick={this.props.handler}
      className="btn btn-danger">
      Increase Volume (Current volume is {this.props.counter})
    </button>
  }
}

6.1.6 컴포넌트 간의 데이터 교환

class ClickCounterButton extends React.Component {
  render() {
    return <button
      onClick={this.props.handler}
      className="btn btn-info">
      Don't touch me with your dirty hands!
    </button>
  }
}

class Content extends React.Component {
  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
    this.state = {counter: 0}
  }
  handleClick(event) {
    this.setState({counter: ++this.state.counter})
  }
  render() {
    return (
      <div>
        <ClickCounterButton handler={this.handleClick}/>
        <br/>
        <Counter value={this.state.counter}/>
      </div>
    )
  }
}

6.2 React가 지원하지 않는 DOM이벤트 처리하기

class Radio extends React.Component {
  constructor(props) {
    super(props)
    this.handleResize = this.handleResize.bind(this)
    let order = props.order
    let i = 1
    this.state = {
      outerStyle: this.getStyle(4, i),
      innerStyle: this.getStyle(1, i),
      selectedStyle: this.getStyle(2, i),
      taggerStyle: {top: order*20, width: 25, height: 25}
    }
  }
  getStyle(i, m) {
    let value = i*m
    return {
      top: value,
      bottom: value,
      left: value,
      right: value,
    }
  }
  componentDidMount() {
    window.addEventListener('resize', this.handleResize)
  }
  componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize)
  }
  handleResize(event) {
    let w = 1+ Math.round(window.innerWidth / 300)
    this.setState({
      taggerStyle: {top: this.props.order*w*10, width: w*10, height: w*10},
      textStyle: {left: w*13, fontSize: 7*w}
    })
  }
  render() {
    return <div>
      <div className="radio-tagger" style={this.state.taggerStyle}>
        <input type="radio" name={this.props.name} id={this.props.id}>
        </input>
        <label htmlFor={this.props.id}>
          <div className="radio-text" style={this.state.textStyle}>{this.props.label}</div>
          <div className="radio-outer" style={this.state.outerStyle}>
            <div className="radio-inner" style={this.state.innerStyle}>
              <div className="radio-selected" style={this.state.selectedStyle}>
              </div>
            </div>
          </div>
        </label>
      </div>
    </div>
  }
}

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

6.3.1. 버튼 통합하기

방법1 jQuery슬라이더를 위한 이벤트를 React컴포넌트에서 등록하는 방법

class SliderButtons extends React.Component {
  constructor(props) {
    super(props)
    this.state = {sliderValue: 0}
    this.handleSlide = this.handleSlide.bind(this)
    this.handleChange = this.handleChange.bind(this)
  }
  handleSlide(event, ui) {
    this.setState({sliderValue: ui.value})
  }
  handleChange(value) {
    return ()=> {
      $('#slider').slider('value', this.state.sliderValue + value)
      this.setState({sliderValue: this.state.sliderValue + value})
    }
  }
  componentDidMount() {
    $('#slider').on('slide', this.handleSlide)
  }
  componentWillUnmount() {
    $('#slider').off('slide', this.handleSlide)
  }
  render() {
    return <div>
      <button disabled={(this.state.sliderValue<1) ? true : false}
        className="btn default-btn"
        onClick={this.handleChange(-1)}>
          1 Less ({this.state.sliderValue - 1})
      </button>
      <button disabled={(this.state.sliderValue>99) ? true : false}
        className="btn default-btn"
        onClick={this.handleChange(1)}>
          1 More ({this.state.sliderValue + 1})
      </button>
    </div>
  }
}

6.3.2 라벨 통합하기

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)
  }
  componentWillUnmount() {
    window.removeEventListener('slide', this.handleSlide)
  }
  render() {
    return <div className="" >
      Value: {this.state.sliderValue}
    </div>
  }
}

# react, tec, 리엑트, 프레임워크