TIL 32 | 분리된 component에서 state & prop 사용 연습

state, props, map함수로 컴포넌트 재사용하는 것을 연습! css와 데이터가 이미 만들어져 있는 상태에서 진행했다.

[완성 페이지]

1. git clone 받기

cd Desktop 데스크탑으로 이동
cd directoryName 클론받을 폴더로 이동
git clone 주소
code . vsCode열기
cmd + j 터미널열기
npm install 패키지 다운받기
npm start 
(브랜치 생성은 생략)

2. API 호출

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

//json
[
  {
    "id": 1,
    "name": "Leanne Graham"
  }, 
  {
    "id": 2,
    "name": "Ervin Howell"
  }
]

데이터가 위와 같은 구조로 이루어져 있어 별도로 key값을 통해 접근하지 않아도 배열에 담겼다. 

3. API 호출의 결과값 props 로 자식에게 전달

filter 기능을 추가하지 않았을 때에는 자식에게 바로 전달했다. 

//Monsters.js
<CardList monsters={this.state.monsters} />

4. Array.map( ) 사용

부모로부터 전달받은 배열 안의 요소인 객체의 id, name, email 값에 접근했으며,
map함수 사용시 추가해줘야 하는 key값은 구분이 명확한 id로 지정했다. 

//CardList.js
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>
);

5. props 활용

부모로부터 전달받은 데이터를 화면에 표시할 수 있도록 한다. 
//Card.js
return (
      <div className="card-container">
  	//id별로 사진을 나타내기 위해 백틱을 사용하여 props를 통해 id를 받을 수 있도록 한다.
        <img
          src={`https://robohash.org/${this.props.id}?set=set2&size=180x180`}
          alt=""
        />
        <h2>{this.props.name}</h2>
        <p>{this.props.email}</p>
      </div>
    );

6. 검색창 filter
   여기서 비교 대상은 monster 객체의 name 값, 소문자로 바꾼 monster.name 값과 userInput값을 비교, filter 메소드가 반환하는 값을 변수에 저장 후 return 문 안에 CardList에 props로 전달

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

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

render() {
  const { monsters, userInput } = this.state;
  //검색 편의를 위해 모두 소문자로 변환해 소문자 대문자 상관 없이 검색 결과를 가져올 수 있도록 함
  const filteredMonsters = monsters.filter((monster) =>
    monster.name.toLowerCase().includes(userInput.toLowerCase())
  );

  return (
    <div className="Monsters">
      <h1>컴포넌트 재사용 연습!</h1>
      <SearchBox handleChange={this.handleSearchBox} />

//this.state.monsters => filteredMonsters
      <CardList monsters={filteredMonsters} />
    </div>
  );
}