1. 데이터 로딩
const [monsters, setMonsters] = useState([]);
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/users')
.then((response) => {
return response.json();
})
.then((result) => {
setMonsters(result);
});
}, []);fetch
- jsonplaceholder에서 제공해주는 users 데이터를 받아온다.
- 받은 데이터를 자바스크립트 객체로 변환시켜준다.
useState
- 데이터 상태를 관리해 줄 것이기 때문에 useState를 import해준다.
import React, { useState } from 'react';
- 객체 형태의 데이터를 setMonsters 함수에 담아 배열의 형태로 상태값을 관리해준다.
- 초기값에는 아직 데이터가 아무것도 없기 때문에 빈 배열로 선언해준다.
useEffect
- 랜더링 후 화면에 보여질 것이 때문에 useEffect를 import해준다.
import React, { useEffect } from 'react';
- 첫 랜더링이 될 때 화면에 한번만 보여지면 되므로 의존성 배열에 빈 배열을 넣어준다.
2. 검색창에 입력한 값 관리하기
useState
const [userInput, setUserInput] = useState('');- useState를 이용하여 검색창에 사용자가 입력한 값들을 관리할 수 있도록 userInput과 setUserInput함수를 만든다.
handleChange(e)
function handleChange(e) {
setUserInput(e.target.value);
}- 사용자가 검색창에 입력한 값을 감지하는 handleChange 함수를 만든다.
- input창에 변화가 감지되면 setUserInput 함수에 사용자가 입력한 value값을 담아준다.
✨3. 이름 filtering
const filterMonsters = monsters.filter((monster) => {
return monster.name.toLowerCase().includes(userInput.toLowerCase());
});filterMonsters
- filterMonsters라는 새로운 배열에 filter 메소드를 사용하여 조건에 맞는 요소만 반환한 배열을 넣어준다.
filter()
- filter 메소드를 사용하여 몬스터의 이름에 사용자가 입력한 알파벳이 있다면 그 몬스터의 이름만 반환하도록 만든다.
toLowerCase()
- 컴퓨터는 알파벳의 대문자와 소문자를 구분한다. 하지만 일반적으로 우리가 이름을 찾을 때 대/소문자를 크게 구분하지 않고 철자가 맞는지 틀린지만 확인한다. 그렇게 때문에 몬스터 이름과 사용자가 입력한 알파벳을 toLowerCase 메소드를 사용하여 모두 소문자로 변환시켜준다.
includes()
- 몬스터 이름에 사용자가 입력한 알파벳이 포함되어 있는지는 includes 메서드를 사용하여 확인해준다.
4. 검색창에 입력한 알파벳이 들어있는 몬스터의 이름만 나올 수 있도록 만들기
CardList 함수 컴포넌트
function CardList({ monsters }) {
return (
<div className='cardList'>
{monsters.map((monster) => {
return (
<Card
key={monster.id}
id={monster.id}
name={monster.name}
email={monster.email}
/>
);
})}
</div>
);
}- CardList 컴포넌트 안에 Card라는 자식컴포턴트가 map 메서드로 여러개 존재하는 형태이다.
- 처음에 fetch로 받아온 데이터의 id, name, email을 동적으로 받아온다.
CardList에 props로 전달
<CardList monsters={filterMonsters} />- CardList에서 받을 데이터는 조건에 맞는 요소를 새로 반환한 "filterMonsters"이어야 한다.
- 그래야 화면에 filtering된 몬스터 카드만 보여질 것이다.
- 만약 fetch에서 받아온 데이터를 그대로 사용한다면 첫 랜더링 했을 때의 그 화면 그대로이다.
🎈 마무리 하며
1. Props 개념에 대한 이해
props를 통해 부모에서 자식 컴포넌트로 데이터를 전달할 수 있다는 사실은 리액트 개념 수업 시간에 들어서 익히 알고 있었다. 여기서 중요한 포인트는 바로 부모에서 자식 컴포넌트로 전달할 수 있다라고 생각했다. 하지만 여기서 '어떤 데이터'를 전달해주는냐에 따라 화면에 보여지는 것 또한 달라질 수 있다는 사실을 검색 기능 구현을 통해 확실히 알게 되었다.
2. 검색 기능 로직
기능 로직을 스스로 고민해보고 생각해내는 것은 아직은 나에게 너무 어렵다. 언젠가는 익숙해질 날이 오기를 기다리며 오늘도 글로 다시 정리해보는 시간을 가져본다. 처음에는 useState도 useEffect도 막 여러개 생성해야 하는 것이 아닌가 나름 복잡하지만 검색이 될 때의 순서를 생각하며 이유 있는 생각들을 해보았다. Monster Card가 첫랜더링 되었을 때 화면에 전부 보여져야 하기 때문에 일단 CardList에 API로 불러온 원본 데이터를 보여지게 하는건 무조건 맞다. 그 다음이 정말 생각이 안난다. 그런 다음 필터링된 카드를 새로운 useState에 담고 그것을 다시 새로운 Effect로 다시 로딩해주면 되지 않을까하는 생각을 했다. 하지만 이렇게 hook을 남용한다고? 라는 합리적 의심으로 잘못된 생각이라는 걸 느낌으로 알았다. 결론은 CardList props에 필터된 데이터를 넣어주면 모든 것이 깔끔하게 해결된다. props는 이렇게 사용하는 거라는 걸 또 알게되는 순간이다.
