✅
componentDidMount()
메소드를 통해 라이프 사이클에 대한 이해를 높인다.
✅fetch()
함수를 사용해 API 호출을 할 수 있다.
✅Array.map()
함수를 통해 component를 재활용할 수 있다.
✅ Object 내에서 콜백함수를 사용 할경우
✅props
를 사용해 단방향(부모 컴포넌트 > 자식 컴포넌트)으로 데이터를 전달할 수 있다
✅Array.filter()
를 통한 검색기능을 구현할 수 있다. (Optional!)
- 사용자가 입력한 데이터
- 페치로 받은 데이터에서 필터링할 키값 (보통 name , email)
componentDidMount() {
const API = '///'
fetch(API)
.then((res) => res.json())
.then((result) =>
this.setState({
monsters: result,
})
);
}
handleChange = (e) => {
this.setState({
userInput: e.target.value,
});
};
render() {
const {userInput , monsters } = this.state;
const filtering = this.state.monsters.filter((monstersData) => {
return (
monstersData.name.toLocaleLowerCase().includes(userInput.toLocaleLowerCase()) ||
monstersData.email.toLocaleLowerCase().includes(userInput.toLocaleLowerCase())
);
});
--Monsetrs.js--
<CardList monsters={filterData}
--------------------------------
--CardList.js---
const {monsters} = this.props
return (
<div className="card-list">
{monsters.map((e)=> {
return <Card id={e.id} name={e.name} email={e.email} />
})}
</div>
-------------------------------
--Card.js---
ender() {
const {id, name, email} = this.props;
return (
<div className="card-container" onClick={this.goToDetail}>
<img src={`https://robohash.org/${id}?set=set2&size=180x180`}></img>
<h2> {name}</h2>
<p> {email}</p>
</div>
);
}