[TIL] 015. React - search

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함수가 호출된다.