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






Posted by 김용환 '김용환'

댓글을 달아 주세요