[오류리뷰] map() 리렌더링

1️⃣ 로직 상황

검색 기능을 만드는데 밑에 추천되는 단어들 중 인풋값에 들어가는 단어들이 아닌 것들이 필터링 되는 로직을 만들고 있었다.

필터링 된 배열을 변수에 담고, input의 onChange 옵션에 필터링 처리를 하는 함수를 넣어서 인풋값이 달라질 때마다 추천되는 단어들이 실시간으로 바뀌게 만들게 하려고 했는데…

2️⃣ 문제 상황

함수는 input value가 변경이 될 때마다 실행이 되서, 필터링된 배열을 담은 변수를 console.log()찍어보면 업데이트가 잘 되는데, 애초에 map()함수는 페이지가 렌더링 될때 한번만 불러와지고 그 다음엔 불러와 지지 않는다는걸 깨달았다. 이걸 어떻게 해야하나 생각하면서, useEffect()를 사용할까도 생각했지만, useEffect() 안 콜백함수에 도대체 뭘 넣어야하는지.. 방법이 없다고 생각했다.

3️⃣ 해결

이 때 팀원의 도움으로 한 가지 아이디어를 얻었다. 그 업데이트된 배열을 담은 변수를 useState()를 이용한 상태에 담아서 업데이트를 시키는 것이다. 그럼 다시 렌더링이 되서 map함수도 같이 다시 돌아지게 된다. 이 원리를 이용하니 로직이 잘 돌아가게 되었다.

  const handleSearchTechStacks = () => {
    setSearchedList(techStackList);
    const searchTerm = searchTechStackRef.current?.value.toLowerCase();

    if (searchTerm?.length! > 0) {
      const filteredTechStack = techStackList.filter((tech) =>
        tech.toLowerCase().includes(searchTerm!)
      );
      setSearchedList(filteredTechStack);
    } else {
      setSearchedList(techStackList);
    }
  };

hooks의 원리에 대해 이해도를 높여야 함을 느끼는 시간이었다.