함수형으로 변경

Author: taejs

chapter7-3/src/PeopleList.js

@@ -1,33 +1,12 @@
 import React, {Component} from 'react';
 import fetch from 'isomorphic-fetch';
-class PeopleList extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            data : [],
-            loaded : false,
-            loading : false
-        }
-    }
 
-    componentWillMount() {
-        this.setState({loading : true});
-        fetch('https://randomuser.me/api/?results=10')
-            .then(response=>response.json())
-            .then(obj => obj.results)
-            .then(data => this.setState({
-                loaded : true,
-                loading : false,
-                data
-            }));
-    }
+const PeopleList = ({data}) => 
+    <ol className="people-list">
+        {data.results.map((person, i) => {
+            const {first, last} = person.name;
+            return <li key={i}>{first} {last}</li>
+        })}
+    </ol>
 
-    render() {
-        const {data, loading, loaded} = this.state;
-        return (loading) ?
-            <div>데이터 로딩 중..</div> : 
-            <ol className="people-list">
-
-            </ol>
-    }
-}
+export default PeopleList;