[React] 몬스터를 잡다...

Prologue

새로운 과제는 몬스터를 때려잡는 것이다. 무려 API로 데이터를 호출해서 Map함수를 사용해서 컴포넌트를 재사용해서 ...... 너무 어려웠지만 항상 그렇듯 물리(시간)로 문제를 해결한다. 신기한게 주먹으로 한 번 치면 안되는데 100번 치다보면 된다. 나에게 필요했던건 충분한 시간을 두고 고민하고 시도하는 것

내가 생각한 이 과제를 하는 이유

• Server Side에서 데이터를 받아오는 것에 대한 이해
• API에 대한 이해
• API로 요청한 자료를 호출하는 과정//json
• json 데이터를 JavaScript로 변환
• 정리하면 서버사이드에서 API로 Json 데이터를 받고, 프론트엔드에서 사용할 수 있게 JavaScript로 변환한다. 그 변환한 데이터를 State에 저장해서 Props를 통해서 데이터를 하위 컴포넌트에 뿌려주고 컴포넌트를 재생산한다.(map)
• 필터링 함수를 사용해서 데이터 핸들링 연습

1. 작업 순서

• index.js API 호출
  호출할 API주소 : https://jsonplaceholder.typicode.com/users
  위 주소를 호출하여 데이터 로딩을 처리
  - componentDidMount()
  - fetch
  - setState (monsters에 저장)
  

• index.js
  CardList 컴포넌트에 monsters라는 이름의 props로 monsters 배열 전달

• Card.js
  Card 컴포넌트 구조 및 모양
  

• CardList.js
  

• App.js
  정의한 handleChange 메소드를 searchBox 컴포넌트에 props를 넘겨주고 호출 시 인자로 들어오는 이벤트 객체(e)를 활용해 userInput 으로 setState.

• App.js 필터링 로직 구현 (filter 메소드 활용)
  여기서 비교 대상은 monster 객체의 name 값입니다.
  소문자로 바꾼 monster.name 값과 userInput값을 비교
  filter 메소드가 반환하는 값을 변수에 저장 후 return 문 안에 CardList에 props로 전달

2. index.js

import React, { Component } from "react";
import SearchBox from "./components/SearchBox/SearchBox";
import CardList from "./components/CardList/CardList";
import "./index.css";

class App extends Component {
    state = {
        monsters: [],	//API 데이터를 변환 후 배열에 저장
        userInput: "",	//사용자가 입력하는 데이터를 받기 위해 빈 스트링을 초기화
    };

    // SearchBox에 props로 넘겨줄 handleChange 메소드 정의

    componentDidMount() {
     // data loading => api 호출 , 최초 렌더 후 단 한 번만 호출
        fetch("https://jsonplaceholder.typicode.com/users")
            .then((res) => res.json()) // json body를 js로 변환
            .then((res) => this.setState({ monsters: res }));	// 변환된 데이터를 setState를 활용해서 monsters배열에 저장
    }
    goInput = e => {
        this.setState({ userInput: e.target.value });
        // 사용자가 입력하는 값에 접근하는 이벤트 생성
    };

    render() {
        // 필터링 로직
        let result = this.state.monsters.filter((mon) => mon.name.toLowerCase().includes(this.state.userInput));
		// monster의 이름을 소문자화시키고 유저가 input창에 입력한 값에 부합하는 요소만 배열에 담아주는 로직
      
        return (
            <div className="App">
                <SearchBox handleChange={this.goInput} />
				// 유저가 input창에 데이터를 입력하면 입력값을 가져오는 goInput함수 실행
                <CardList monsters={result} />
                //필터링된 카드들이 카드리스트 위치에 출력
            </div>
        );
    }
}

export default App;

3. CardList.js

import React, { Component } from "react";
import "./CardList.css";
import Card from "../Card/Card";

class CardList extends Component { //CardList 컴포넌트 생성
    render() {
        return (
            <div className="card-list">
                {this.props.monsters.map((el, idx) => {
                    return <Card key={idx} id={el.id} name={el.name} email={el.email} />;	// index.js의 state에서 props로 데이터를 받아와서 map함수로 컴퍼넌트를 복제
                })}
            </div>
        );
    }
}

export default CardList;