리액트 클래스형 컴포넌트와 함수형 컴포넌트의 차이
<클래스형>
import React, { Component } from 'react';
class ListEmployeeComponent_Class extends Component {
//생성자를 통한 클래스형 컴포넌트
// constructor(props){
// super(props);
// this.state = {
// name:"employees",
// items:[]
// }
// }
//생성자 없이 클래스형 컴포넌트
state = {
name:"employee",
item:[]
}
componentDidMount(){
EmployeeService.getEmployees().then((res)=>{
this.setState({item:res.data})
})
}
render() {
return (
<div>
<h2 className="text-center">Employee List</h2>
<div className='row'>
<table className='table table-striped table-hover'>
<thead>
<tr>
<th>Employee First Name</th>
<th>Employee Last Name</th>
<th>Employee Email Id</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{
this.state.item.map(
employee =>
<tr key={employee.id}>
<td>{employee.firstName}</td>
<td>{employee.lastName}</td>
<td>{employee.emailId}</td>
<td>{}</td>
</tr>
)
}
</tbody>
</table>
</div>
</div>
);
}
}
export default ListEmployeeComponent_Class;
<함수형>
import React, { useEffect, useState } from 'react';
function ListEmployeeComponent_Fn(props) {
const [employee, setEmployees] = useState();
useEffect(()=>{
EmployeeService.getEmployees().then((res)=>{
setEmployees(res.data);
})
},[]);
return (
<div>
<h2 className="text-center">Employee List</h2>
<div className='row'>
<table className='table table-striped table-hover'>
<thead>
<tr>
<th>Employee First Name</th>
<th>Employee Last Name</th>
<th>Employee Email Id</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{
employee.map(
employee =>
<tr key={employee.id}>
<td>{employee.firstName}</td>
<td>{employee.lastName}</td>
<td>{employee.emailId}</td>
<td>{}</td>
</tr>
)
}
</tbody>
</table>
</div>
</div>
);
}
export default ListEmployeeComponent_Fn;
구디아카데미 후기/ 국비지원IT개발자 취업 / 전민균 강사님/
'구디 아카데미 수료 과정 > JPA' 카테고리의 다른 글
| 구디아카데미 후기/ 국비지원IT개발자 취업 / 전민균 강사님/클라우드 활용 자바개발자 양성과정/•87일차/03.04 (0) | 2024.03.04 |
|---|