[Mini Procjet] - Monster API 받은 후 검색구현

김찬영·2020년 12월 19일

Project Process

목록 보기

2/2

구현하는 기능과 배우는 컨셉

✅ componentDidMount() 메소드를 통해 라이프 사이클에 대한 이해를 높인다.
✅ fetch() 함수를 사용해 API 호출을 할 수 있다.
✅ Array.map() 함수를 통해 component를 재활용할 수 있다.
✅ Object 내에서 콜백함수를 사용 할경우
✅ props 를 사용해 단방향(부모 컴포넌트 > 자식 컴포넌트)으로 데이터를 전달할 수 있다
✅ Array.filter() 를 통한 검색기능을 구현할 수 있다. (Optional!)

검색기능구현하기

검색기능 구현에서 제일중요한 키워드 2가지만 기억하자

사용자가 입력한 데이터

페치로 받은 데이터에서 필터링할 키값 (보통 name , email)

결국 이 두개의 값이 서로 true일떄 리턴하여 받은 filter된 data를 그대로 보여주고 싶은 UI에 props로 전달하여 mapping해주면 끝!

그럼 순서대로 따라해보자! 👍

1. API 호출


  componentDidMount() {
    const API = '///'
    fetch(API)
      .then((res) => res.json())
      .then((result) =>
        this.setState({
          monsters: result,
        })
      );
  }

componentDidMount에서 fetch를 이용하여 API를 호출하고, 호출받은 데이터를 setState에 저장한다. 준비물 중 1개가 완성된것이다.

나머지 한개의 준비물인 input.value를 가져와보자.

 handleChange = (e) => {
    this.setState({
      userInput: e.target.value,
    });
  };

e.target.value도 setState에 저장한다.

그리고 이 두개를 그대로 필터링만 해주면 끝난다! 준비물 가공시작! 🤞

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())
     );
     });

pros로 전달하여 맵핑하기 !! 요리완성 됐으면 이제 음식을 그릇에 옮겨요~ 🙌

--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>
    );
  }