[TIL] 015. React - search
12362 단어 ReactJavaScriptTILJavaScript
Search 기능
fetch
componentDidMount(){
fetch('https://jsonplaceholder.typicode.com/users', {
method: 'GET'
})
.then(res => res.json())
.then(res =>{
this.setState({
monstersOriginal: res
});
});
}
fetch
함수를 활용하여 데이터를 가져와서 state
로 정의해주었다!
Mock Data가 아닌 진짜 data를 가져와서 사용해본것은 처음이라 신기하고 재밌었다! 👍
Monsters 컴포넌트
◾ state
state = {
monstersOriginal: [],
monsters: [],
userInput: ""
};
card 형식으로 반복되는 데이터는 배열안에 객체로 정의해주었다. monstersOriginal은 filter
되지 않은 기존 배열을 담고, monsters는 userInput의 value값에 의해 filter
된 배열을 담을것이다.
handleChange
handleChange = e => {
const { value } = e.target;
const { monstersOriginal } = this.state;
const nameSort = item => {
return item.name.toLowerCase().includes(value);
};
this.setState({
userInput: value,
monsters: monstersOriginal.filter(nameSort)
});
};
input
에서 넘어온 value값을 기준으로 filter
메서드를 활용하여 monsterOriginal의 배열을 분류한다. 분류된 배열을 monsters라는 state로 setState되도록 했다.
◾ render
render() {
const { monsters, monstersOriginal, userInput } = this.state;
const { handleChange } = this;
return (
<div className="Monsters">
<h1>컴포넌트 재사용 연습!</h1>
<SearchBox handleChange={handleChange} />
<CardList monsters={
userInput ? monsters : monstersOriginal
} />
</div>
);
}
CardList라는 컴포넌트에 monsters를 노출한다. userInput에 값이 있으면 handlechange함수로 filter
된 CardList가 보여지고, 값이 없으면 monstersOriginal인 CardList가 보여지도록 했다.
CardList 컴포넌트
class CardList extends Component {
render() {
const { monsters } = this.props;
const CardItem = monsters.map(({ id, name, email }) => (
<Card
key={id}
id={id}
name={name}
email={email}
/>
));
return <div className="card-list">{CardItem}</div>;
}
}
props
로 받은 데이터에 map
메서드를 활용하여 각각 다른 데이터를 가진 Card 컴포넌트가 노출되도록 했다.
SearchBox 컴포넌트
class SearchBox extends Component {
render() {
return (
<input
className="search"
type="search"
placeholder="Search..."
onChange={this.props.handleChange}
/>
);
}
}
input
에 값이 들어오면 props
로 전달받은 onChange
함수가 호출된다.
Author And Source
이 문제에 관하여([TIL] 015. React - search), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hyojeong0122/TIL-015.-React-search저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)