[14기 과제] React 디버깅 미션

7주차 과제는 Lion Store 쇼핑몰 페이지에서 발생하는 다양한 문제를 해결하는 디버깅 미션이었습니다. 문제는 1번부터 5번까지 총 5문제였으며 5문제 모두 쉽지 않게 느껴졌지만 그 중에서도 4번 문제가 가장 까다롭게 느껴졌습니다. 4번 문제는 검색어 창에서 일어나는 버그를 해결하는 문제였습니다. 처음에 검색 창에서 '후' 한 글자를 쳤을 때 '후드티' 항목이 필터링되어야 하는데 8개 항목 모두 나타났고, 페이지 상단의 최근 검색어 박스가 무한 루프에 빠져 계속 늘어납니다. 우선 검색 자체가 동작하도록 만들기 위해 products.tsx에서 filter를 다루는 useEffect를 살펴보았습니다.

typescript

  useEffect(() => {
    setFiltered(
      products.filter((p) =>
        p.name.toLowerCase().includes(search.toLowerCase()),
      ),
    )
  }, [])

위의 useEffect의 dependency array가 비어있었습니다. 이 말은 컴포넌트가 처음 렌더링 될 때만 필터가 실행되고 search값이 바뀌어도 다시 실행되지 않는다는 것입니다. 그래서 이 자리에 search를 넣어주어 검색어가 바뀔 때마다 필터를 실행할 수 있도록 해주었더니 검색 기능은 정상적으로 작동하였습니다. 다음으로 최근 검색어가 무한 루프에 빠지는 문제를 해결하기 위해 이를 다루는 useEffect를 살펴보았습니다.

typescript

  useEffect(() => {
    if (search.trim()) {
      setRecent([...recent, search])
    }
  }, [search, recent])

우선 useEffect의 dependency array에 있는 recent가 useEffect 실행-setRecent 실행을 반복 시켜 무한 루프 문제가 일어난다는 것을 깨닫고 의존성 배열에서 recent만 제거해봤습니다. 하지만 이렇게 하니 최근 검색어 창이 작동하지 않았습니다. 생각해보니 이건 검색 창이 작동하지 않았던 상황과 동일했습니다. 의존성 배열에 recent가 없으니 바뀐 recent를 반영하지 못해 최근 검색어 창이 작동하지 않은 것입니다. 그래서 의존성 배열을 사용하지 않고 최신 recent값을 받아올 수 있는 방법을 생각해봤습니다. 이를 위한 방법은 prev를 사용하는 것이었습니다.

typescript

setRecent((prev) => [...prev, search])

이를 활용해 최신 recent 값을 받아올 수 있게 되었습니다. 위와 같이 무한 루프 문제를 해결하고 나니 같은 검색어를 여러 번 입력하면 최근 검색어에 그만큼 추가되는 중복 문제가 있다는 것을 알았습니다. 이를 위해 includes를 사용했습니다.

typescript

setRecent((prev) => prev.includes(search) ? prev : [...prev, search])

이로써 검색에 관한 버그는 모두 해결했습니다. 다음 버그는 검색을 동작하고 나면 상품에 적어둔 메모가 다른 상품으로 옮겨가는 문제였습니다. 키링에 적어둔 'abc'가 후드티로 옮겨간 모습입니다. 이는 key에 관한 문제라고 생각하여 코드를 살펴보았습니다.

typescript

{filtered.map((p, idx) => (
  <ProductCard key={idx} product={p} />
))}

위 코드에선 key에 index를 사용했습니다. 이렇게 하니 검색어에 '키'를 입력했을 때는 키링 상품의 index가 1이었는데 검색어를 지우면 후드티 상품의 index가 1이라서 메모가 옮겨간 것입니다. 이에 대해 검색해보니 react에서는 key에 index를 사용하는 것을 피해야 한다고 나왔습니다. 그래서 key를 id로 바꿔주었습니다.

typescript

{filtered.map((p) => (
  <ProductCard key={p.id} product={p} />
))}

이렇게 하니 메모가 옮겨가지 않게 되었습니다.

과제를 마무리하며

이번 과제 4번을 통해 얻은 핵심 내용은 두 가지였습니다.

useEffect에서 의존성 배열에 어떤 것이 들어가냐에 따라 큰 차이가 나타난다.
react에서 key를 index로 사용하지 않는다.

앞으로 비슷한 문제가 일어나면 useEffect의 의존성 배열을 살펴보고 어떤 식으로 동작하도록 설계되어 있는지 파악하고, key를 어떤 값으로 사용하고 있는지 파악하면 문제 해결이 수월해질 것 같습니다.

[14기 과제] React 디버깅 미션

과제를 마무리하며

문지호

댓글 0