Monster 과제 복습

지금까지 배운 React 기초 개념(state, porps, events) 들을 직접 적용하고 응용해보며 내 자신의 약점을 복습해보았다. 이번 과제의 핵심은 주어진 키워드를 활용해 자료를 찾아보면서 적용시켜보는 것이였다.

총 5가지의 학습 목표

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

과제를 시작하기 전 기본적인 세팅방법

• directory로 이동하여 해당 repo를 git clone "url" 를 통하여 받아줍니다.
• VSCode에서 해당 폴더안에 들어가서 npm instal를 하여 package를 다운로드 받아 줍니다.
• 그리고선 Monsters.js,car,cardList,SearchBox같은 폴더들이 제대로 있는 확인 해줍니다.

과제

1) API 호출

• 파일:Monsters.js
• 아래의 키워드를 사용해 데이터 로딩을 처리해준다.

1. componentDidMount()
2. fetch() → 호출할 API 주소: https://jsonplaceholder.typicode.com/users
3. setState() → state 객체 내에 monsters 라는 key 값에 저장

Solution)

componentDidMount() {
fetch("https://jsonplaceholder.typicode.com/users")
.then((res) => res.json())
.then((res) => this.setState({ monsters: res }));
}

2) API 호출의 결과값 props 로 자식에게 전달

• 파일:Monsters.js
• API 호출 후 저장한 배열을 자식 컴포넌트인 에 넘겨줍니다.( Props 활용)
• 넘겨준 후 CardList.js에서 props를 콘솔에 찍어 확인

Solution)

render() {
return (

  <div className="Monsters">
    <h1>컴포넌트 재사용 연습!</h1>
    {/* <SearchBox handleChange=정의한메소드 /> */}
    <CardList monsters={this.state.monsters} />
  </div>
);

}

3) Array.map()사용

• 파일:CardList.js
• Array.map() 함수 사용법을 꼭 익힌다.
• 넘겨받은 배열을 기준으로 Array.map() 함수를 활용하여 컴포넌트를 리턴해줍니다.
• Card.js에게 넘겨줘야하는 props는 각 몬스터 객체의 id,name,email 입니다.

Solution)

class CardList extends Component {
render() {
return (

  <div className="card-list">
    {this.props.monsters.map((monster) => {
      return (
        <Card
          key={monster.id}
          id={monster.id}
          name={monster.name}
          email={monster.email}
        />
      );
    })}
  </div>
);

4) Props활용

• 파일:Card.js
• Card.js. 컴포넌트 모양 및 구조
  
• 이미지 주소 (src)
  https://robohash.org/숫자?set=set2&size=180x180
  카드마다 다른 이미지를 보여주기 위해 위 주소의 숫자 부분을 props 로 내려받은 id 로 대체해주세요.

Soultion)

class Card extends Component {
render() {
return (

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

}
}