Monster Card Assignment

컴포넌트 재사용을 위한 과제

1. API호출 & 그 결과값을 props로 자식 컴포넌트에게 전달

state = {
  monsters: [],
  userInput: "",
}
API = "https://jsonplaceholder.typicode.com/users";
ComponentDidMount() {
  fetch(this.API)
  .then((res) => res.json())
  .then((res) => {
    this.setState({
      monsters: res
    })
  })
}

render() {
  return (
    <CardList monsters={this.state.monsters}
    />
  )
}

2. Array.map()을 사용하여 컴포넌트 리턴하기 (id, name, email)

class CardList extends Component {
render() {
  const { monsters } = this.props;
  return (
  <div className="card-list">
    {monsters.map((monster) => {
      return (
        <Card
          key={monster.id}
          id={monster.id}
          name={monster.userName}
          email={monster.email}
        />)}
  </div>
  )
}
}

3. props를 활용하여 Card.js 컴포넌트 모양 및 구조 잡기

const { id, name, email } = this.props;
render() {
  return (
  <div className="card-container" />
    <img src=`https://robohash.org/${id}?set=set2&size=180x180` />
    <h2>{name}</h2>
    <p>{email}</p>
  )
}

결과물

새로 알게 된 내용
1. Templete literals
ES6부터 제공하는 템플릿 리터럴은 이중 따옴표("")나 작은 따옴표('') 대신 백틱( )(grave accent)을 이용합니다. 또한 플레이스 홀더를 이용하여 표현식을 넣을 수 있는데, 이는 $와 중괄호를 이용하여 ${expression} 다음과 같이 표현합니다. 백틱 안에 백틱을 넣어야 할때는 백틱 앞에 백슬러시\를 붙여줍니다.
예시

<img src=`https://robohash.org/${this.props.id}?set=set2&size=180x180` />

다음과 같이 변수, state값, props값 등을 참조할때`${expression}`를 이용할 수 있다.

2. 검색 기능
   
   검색창에 입력한 문자가 포함된 카드들을 찾는 함수입니다.
   우선, input value를 state에 저장해두고 onChange될 때마다 필터링을 사용하면 됩니다.
   state = { monsters: [], userInput: [],}
   const filterMonster = this.state.monsters.filter( monster =>
   monster.name.includes({userInput}))