다른 라이브러리와 통합하기

DOM 조작 플러그인과 통합하기

• 리액트는 DOM에서 일어나는 변화를 인식하지 못하므로, 리액트 컴포넌트가 업데이트 되지 않게 막아야 한다. 업데이트할 필요가 없는 <div> 같은 요소를 렌더링 하자.

• jquery 플러그인은 DOM에 이벤트리스너를 등록하므로 componentWillUnmount메소드 내에서 리스너를 해제 해주어야 한다.

• 웬만하면 jquery 사용은 지양하고, 리액트 컴포넌트를 사용하는 것이 비용 및 시간적인 측면에서 더 좋다.

class SomePlugin extends React.Component {
  componentDidMount() {
    this.$el = $(this.el);
    this.$el.somePlugin();
  }

  componentWillUnmount() {
    this.$el.somePlugin('destroy');
  }

  render() {
    return <div ref={el => this.el = el} />;
  }
}

문자열 기반 렌더링을 React로 바꾸기

바꾸기 전 jquery

$('#container').html('<button id="btn">Say Hello</button>');
$('#btn').click(function() {
  alert('Hello!');
});

리액트 컴포넌트로 바꾼 후

function Button(props) {
  return <button onClick={props.onClick}>Say Hello</button>;
}

function HelloButton() {
  function handleClick() {
    alert('Hello!');
  }
  return <Button onClick={handleClick} />;
}

ReactDOM.render(
  <HelloButton />,
  document.getElementById('container')
);