이제 componentDidMount()에서 데이터를 가져오는 컴포넌트를 전체적으로 살펴보자(ch05/users/jsx/users.jsx).

 

예제 코드 5.3 표에 입력할 데이터 가져오기

class Users extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            users: [] ---- 상태의 users에 빈 배열을 넣어 초기화한다.
        }
    }
    componentDidMount() {
        fetch(this.props['data-url']) ---- 속성으로 전달받은 URL로 GET XHR 요청을 보내 사용자 데이터를 가져온다.
            .then((response) => response.json())
            .then((users) => this.setState({users: users})) ---- 응답 결과에서 사용자 정보를 상태에 할당한다.
    }
    render() {
        return <div className="container">
            <h1>List of Users</h1>
            <table className="table-striped table-condensed table table-bordered table-hover">
                <tbody>{this.state.users.map((user) => ---- 상태의 users를 이용해서 표의 행을 생성한다.
                    <tr key={user.id}>
                        <td>{user.first_name} {user.last_name}</td>
                        <td> {user.email}</td>
                        <td> {user.ip_address}</td>
                    </tr>)}
                </tbody>
            </table>
        </div>
    }
}

---