- 위 주소를 호출하여 데이터 로딩을 처리해주세요!
- useEffect()
- fetch
- setState (monsters 에 저장)
- SearchBox 컴포넌트에 정의한 handleChange 메소드를 넘겨주고, 호출 시 인자로 들어오는 이벤트객체(e)를 활용해 userInput 으로 setState.
- Card 컴포넌트를 import 한 뒤, props로 내려받은 데이터에 map 함수를 호출해 각각 다른 데이터를 가진 Card 컴포넌트들을 리턴해주세요!
- Card 컴포넌트에서 필요로 하는 데이터는 id, name, email 입니다.
- 객체는 괄호로 감싸주자
- 구조분해할당을 통해서 코드를 더 간결하게 작성하자
- map 메소드 안에서 return 작성하는 경우 -> 특별한 조건을 가지고 와야 할 때 / 로직이 복잡할 때 /
- 필터링 로직 구현 (filter 메소드 활용)
여기서 비교 대상은 monster 객체의 name 값입니다.
소문자로 바꾼 monster.name 값과 userInput값을 비교하고 filter 메소드가 반환하는 값을 변수에 저장 후 return 문 안에 CardList에 props로 전달
개념
map 메소드 -> array.map((value,index,array) => {...});
