[react] create-react-class 대신 extends React.Component

react를 처음 해보는 개발자라면 인터넷에서 create-react-class를 봤을 것이다.

이게 15.5 이하에서 사용하던 부분인데. 15.6부터 바뀌었다. 

나는 react 16부터 개발하다 보니 소스 코드를 참조하려다가 react 15를 공부한 경우이다.

react 15.6부터는 create-react-class를 사용하면 deprecated warning 로그를 보게 될 것이다. 16.x부터는 삭제된다는 로그가 나온다. 

Warning: Accessing createClass via the main React package is deprecated, and will be removed in React v16.0. Use a plain JavaScript class instead. If you're not yet ready to migrate, create-react-class v15.* is available on npm as a temporary, drop-in replacement. For more info see https://fb.me/react-create-class

예전 코드라고 보고 정리하는 것이 좋다.

ES6의 React.Component로 사용하는 것이 최신 트렌드이다.

https://reactjs.org/docs/react-without-es6.html

https://reactjs.org/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.createclass

예를 들어 아래와 creactReactClass가  React.Component를 상속한 형태로 변경된 것을 볼 수 있다. 

var createReactClass = require('create-react-class');
var Greeting = createReactClass({
  render: function() {
    return <h1>Hello, {this.props.name}</h1>;
  }
});

=>

class Greeting extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

https://github.com/seatgeek/react-infinite/blob/7efd66437b5b01b28d21a35736fa2d8155605b9a/README.md#in-the-browser

아래와 같은 예제 코드는 다음 예제로 변경할 수 있다. 

var createReactClass = require('create-react-class');

var ListItem = createReactClass({
    render: function() {
        return <div className="infinite-list-item">
        List Item {this.props.num}
        </div>;
    }
});

var InfiniteList = createReactClass({
    getInitialState: function() {
        return {
            elements: this.buildElements(0, 20),
            isInfiniteLoading: false
        }
    },

    buildElements: function(start, end) {
        var elements = [];
        for (var i = start; i < end; i++) {
            elements.push(<ListItem key={i} num={i}/>)
        }
        return elements;
    },

    handleInfiniteLoad: function() {
        var that = this;
        this.setState({
            isInfiniteLoading: true
        });
        setTimeout(function() {
            var elemLength = that.state.elements.length,
                newElements = that.buildElements(elemLength, elemLength + 1000);
            that.setState({
                isInfiniteLoading: false,
                elements: that.state.elements.concat(newElements)
            });
        }, 2500);
    },

    elementInfiniteLoad: function() {
        return <div className="infinite-list-item">
            Loading...
        </div>;
    },

    render: function() {
        return <Infinite elementHeight={40}
                         containerHeight={250}
                         infiniteLoadBeginEdgeOffset={200}
                         onInfiniteLoad={this.handleInfiniteLoad}
                         loadingSpinnerDelegate={this.elementInfiniteLoad()}
                         isInfiniteLoading={this.state.isInfiniteLoading}
                         >
            {this.state.elements}
        </Infinite>;
    }
});

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

->

class ListItem extends React.Component {
    render() {
        return <div className="infinite-list-item">
        List Item {this.props.num}
        </div>;
    }
}

class InfiniteList extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            elements: this.buildElements(0, 20),
            isInfiniteLoading: false
        }
    }

    buildElements(start, end) {
        var elements = [];
        for (var i = start; i < end; i++) {
            elements.push(<ListItem key={i} num={i}/>)
        }
        return elements;
    }

    handleInfiniteLoad() {
        var that = this;
        this.setState({
            isInfiniteLoading: true
        });
        setTimeout(function() {
            var elemLength = that.state.elements.length,
                newElements = that.buildElements(elemLength, elemLength + 1000);
            that.setState({
                isInfiniteLoading: false,
                elements: that.state.elements.concat(newElements)
            });
        }, 2500);
    }

    elementInfiniteLoad() {
        return <div className="infinite-list-item">
            Loading...
        </div>;
    }

    render() {
        return <Infinite elementHeight={40}
                         containerHeight={250}
                         infiniteLoadBeginEdgeOffset={200}
                         onInfiniteLoad={this.handleInfiniteLoad}
                         loadingSpinnerDelegate={this.elementInfiniteLoad()}
                         isInfiniteLoading={this.state.isInfiniteLoading}
                         >
            {this.state.elements}
        </Infinite>;
    }
}

ReactDOM.render(
    <InfiniteData />,
    document.getElementById("container")
);