[wecode] 몬스터

1.이런식으로 useState와 map 등을 사용하여 화면을 구성하고

2. SearchBox에 입력시 filter()를 이용해서 해당하는 요소들을 화면에 나타내면 된다.
   

1. 일단 데이터가 필요하기 때문에 useEffect를 이용해서 데이터를 불러왔고 이런 나열되는 데이터는 최초 렌더링시 1회만 불러오는 것이 트래픽을 낭비하지 않는데 효과적이기 때문에 비어있는 의존성 배열을 넣어줬다.

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json())
      .then((data) => {
        setMonsters(data);
      });
  }, []);

2. 불러 온 데이터의 수 만큼 map()을 이용해서 출력되도록 하였고 key의 경우 데이터 고유 id를 넣어줬다.

  {monsters.map((item, i) => {
        return (
          <div className="card" key={item.id}>
            <img
              src={"https://robohash.org/" + item.id + "?set=set2&size=180x180"}
            ></img>
            <h2>{item.name}</h2>
            <p>{item.email}</p>
          </div>
        );
      })}

첫번째 사진처럼 출력 완료.

3. 이제 searchbox에 입력값을 넣으면 해당하는 요소들만 걸러내보자.

function handleChange(e) {
    setUserInput(e.target.value.toUpperCase());
  }

영어는 소문자와 대문자를 구별하기 때문에 대문자로 바꾸던가 소문자로 바꾸던가 해서 저장하자.

4. 화면 출력은 monsters를 담고 있는 state에 따라 변하기 때문에 해당 state를 이용하면 될 것이라고 생각했다.

<CardList monsters={monsters} />

그래서 이렇게 monsters state를 자식 컴포로 전달해서
monsters.filter((monster)=>monster.name.toUpperCase().includes(userInput))
이렇게 걸러냈는데 이렇게 되면 변하면 안되는 데이터인 monsters를 건드리는 것이라 나중엔 요소가 다 삭제되어 다 비어버리게 되었다.

그래서 억지로 userInput의 length가 0이 되면 다시 데이터를 불러와 monsters에 세팅하도록 했는데 너무 억지스러웠다.

4. 해결책

let copy = [...monsters];
copy = monster.filter((monster) => 
	monster.name.toUpperCase().includes(userInput));

독립적 카피본을 만들어서 인풋에 따라 걸러지게 한 다음 이 copy가 자식 컴포로 전달되게 하고 map()을 실행했음.

자식 컴포가 전달받는 copy는

1. 전체 데이터가 monsters에 저장
2. monsters를 copy가 복사.
3. copy본에서 input에 따라 filter로 걸러냄
4. 걸러낸 copy가 자식에게 전달
5. map()
6. 재렌더링 되는 과정에서 copy는 monsters를 복사하고 있기 때문에 다시 초기로 세팅 됨.

이런 과정들이 반복되어 필터링이 가능해짐!!@!@!@