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")
);
