[react] Monsters 과제

김효식 (HS KIM)·2020년 7월 26일

여태까지와는 다른 형식의 과제였고, 그래서 더 어렵지만 나름 해결해나가는 재미도 있었다.

이번 과제를 통해서 배울 수 있었던 개념들
✔️ componentDidMount() 의 특징과 활용법
✔️ fetch() 함수를 통한 API 호출 (GET)
✔️ map() 함수를 통한 component 재활용
✔️ props 를 사용한 단방향 데이터 전달 활용
✔️ filter() 를 통한 검색기능 구현 (Optional)

코드 리뷰👀

👉 `fetch`함수를 통한 API 호출

👉 `componentDidMount()` 의 특징과 활용법

class Monsters extends Component {
  state = {
    monsters: [],
    userInput: '',
  };

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

fetch함수의 인자로 기존에 저장돼있는 api주소를 넣어서, Json데이터를 받아온다. 지금은 GET방식으로 데이터를 받아오기만 하기 때문에, 두번째 인자의 값은 필요하지 않다. Json형식의 데이터를 javascript형식으로 변환해주고 monsters배열에 데이터를 넣어준다. then을 사용하는 이유는 api에서 Json형식으로 된 데이터를 받아오는데 시간이 걸리는데 모든 데이터를 받아온 뒤에 다음 작업이 이루어져야하고, 또 json형식에서 javascript형식으로 모든 데이터가 바뀐 뒤에 다음 작업이 이루어져야 하기 때문이다. fetch함수는 필수는 아니지만, 보통 componentDidMount()함수 안에서 실행되는데 그 이유는 setState로 state의 값을 변경시켜주면 다시 render()를 실행하게 되는데, render()를 실행하면 다시 fetch를 실행하면서 무한 loop를 돌게 된다. componentDidMount()는 최초 렌더가 끝나고 한번만 실행된다는 특징이 있기 때문에 그런 문제점을 방지해준다.

👉 `filter()` 를 통한 검색기능 구현

render() {
    const filterMonster = this.state.monsters.filter((monster) => {
      return monster.name.toLowerCase().includes(this.state.userInput.toLowerCase());
    });

filterMonster는 검색창에 입력한 이름에 해당하는 데이터만 화면에 보여줘야 되는데, 실시간으로 값이 바뀌는 모습을 화면에 보여주기 위해서는 render안에 있어야 한다. monster의 name이 검색창의 value를 포함하고 monster만 화면에 보여줄 수 있게 filter함수를 사용했다.

👉 `map()` 함수를 통한 component 재활용

👉 `props` 를 사용한 단방향 데이터 전달 활용

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

monster컴포넌트의 return에는 위와 같은 내용이 들어있다.
그 중 CarList컴포넌트의 return에는 아래와 같이 map함수를 활용한다.

{this.props.monsters.map((monsters) => {
          return (
            <Card key={monsters.id} id={monsters.id} name={monsters.name} email={monsters.email} />
          );
})}

참고로 이건 api주소에 있는 Json데이터의 일부인데 이런 데이터가 monsters배열에 들어가 있다.
map함수는 monster배열에서 하나씩 값을 꺼내서 Card컴포넌트로 id, name, email을 넘겨준다.

class Card extends Component {
  render() {
    return (
      <div className="card-container">
        <img
          alt="몬스터 그림"
          src={`https://robohash.org/${this.props.id}?set=set2&size=180x180`}
        />
        <h2>{this.props.name}</h2>
        <p>{this.props.email}</p>
      </div>
    );
  }
}