[REACT] 검색기능함정 발견쓰 & 해결 룰루

어제 검색기능을 구현해 낸게 너무 좋아서 🥳😍
까먹기전에 연습 & 복습겸 내 위스타그램에도 적용 시켜보았다.

그런데.....

얘 왜이러지 처음시작 왜이러지 없는상태로 시작해야지 왜 처음부터 다보여주지 하
없어지라고 처음부터 다보이지말고 없어지라고...
내가 입력하는것만 보여주라고 아오 뭐이렇게 관대해ㅐㅐㅐ🤯

검색안하고 해결해 보려다가 또다시 시간은 가고 답이안나와서 검색 시작.
근데 왠걸ㅎ.. 검색해도 모르겠다. 애초에 짠코드가 달라서 다른 블로그의 설명이 이해가 되지 않았다 ㅠ

---

쉽게 해결할 수 있을거라 느낀 이유:

입력값이랑 같은 데이터만 보여주는 건 구현완료 .
어려운거 끝났고!
if문 써서 입력값===''이면 데이터 안보이게 어떻게 어떻게 하면 되겠지~~

헤맨이유:

아직 props의 이해가 부족한듯..
그리고 조건문을 어디다 써야하는지 제대로 생각을 못했음

영광스런..실패과정 🥲🤯

searchBox: 데이터 객체 가져온 상태
InstaListWrap: 인스타그램계정 리스트를 보여주는 컴포넌트 (JSX부분)
input: 사용자 입력값을 받아 소문자로 바꿔준 상태

실패코드 1
검색어를 입력하면 검색어에 맞는 리스트를 보여주긴함.
하지만, 처음부터 모든 데이터리스트를 다보여주며 시작...

  const [searchBox, setSearchBox] = useState([]);
  const filtered = searchBox.filter(item =>
    item.userId.toLowerCase().includes(input)
  );
 <InstaListWrap searchList={filtered} />

실패코드 2
처음에 데이터 리스트를 다 보여주다가
검색창에 값을 입력하면 리스트 모두 사라짐...


내 목적: input값이 없으면 빈배열을 주고, 아니면 필터링된 배열을 줘라.. 였는데 이렇게하는게 아닌가보다.
이건 아직도 왜틀린지 모르겠음😢

  const [searchBox, setSearchBox] = useState([]);
    const filtered = searchBox.filter(item => {
    if (input.length === 0) {
      return [];  // 아마도 이부분이 틀린듯...?
    } else {
      item.userId.toLowerCase().includes(input);
    }
  });
 <InstaListWrap searchList={filtered} />

실패코드 3
안보임.. 걍 아무것도 안보임 .. 페이지 전체가 사라졌다
내사랑 콘솔로그도 에러파티 하심🍾🍾


내 목적: input길이가 0이면 빈배열, 아니면 필터링된 배열을 넘겨줘라
지금 정리하다보니 emptyArr변수자체가 말이 안되네..
저때는 빈배열을 반환해주는 변수라고 생각했는데 ㅋㅋㅋ
무튼 에러~~

  const [searchBox, setSearchBox] = useState([]);
  const filtered = searchBox.filter(item =>     // 잘 작동하는 filtered는 놔두고
    item.userId.toLowerCase().includes(input)
  );
  const emptyArr = setSearchBox([]);            // 빈배열을 만들어주는 변수를 하나더 만들어줌
  <InstaListWrap searchList={input.length === 0 ? emptyArr : filtered}/>

이 외에도 진짜 너무 많은 에러코드가 있었는데 기억이 나지 않는다..

장장 4시간동안 잡고 있었다 ㅋㅋ
그래도 해결하고 이렇게 포스팅을 하게 된게 어디야 :)

---

해결!!!!!!

해결코드😍
조건문을 필터에 걸게 아니고
JSX부분에 걸어 그냥 해당 컴포넌트가 안보이게 하면 되는것이었다.

  const filtered = searchBox.filter(item =>
    item.userId.toLowerCase().includes(input)
  );
  {input.length !== 0 ? <InstaListWrap searchList={filtered} /> : null}

쨘쨘쨘쨘쨘💕

---

이번 포스팅 뭔가 기빨리고 허무하고 행복해서 좀 정신 없다..ㅋㅋ
시간도 오래걸리고 왜 안되지의 연속이었지만 결과적으로 성공해서 뿌듯하고 앞으로 제발 안 까먹길!!💪