자동완성 기능 질문

[SunNacho]

검색창 자동완성 기능 한번 끄적이고 있는데, 궁금한 점이 있습니다.

일단 useState를 사용해 keyword와 keyItems를 선언했구요,

검색창에 입력하면 keyword에 저장되도록 onChange함수를 선언했습니다.

그 다음 keyword에 따라 가져온 api데이터에서 원하는 값을 필터링 할 수 있게 해주는 updateData함수를 선언했구요

useEffect를 사용해서 keyword가 변경될 때마다 updataData함수를 실행시키고, 철자 하나하나에 반응하지 않게 하기 위해 setTimeout을 사용했습니다.

아래는 페이지에 바인딩한 코드구요. 실행화면도 아래와 같습니다.

궁금한 점은 두가지 입니다.

1. updataData와 useEffect에 밑줄로 경고표시가 뜨는데 구동은 문제없이 돌아가거든요? allCoinList가 undefined인 것 같습니다.. 라고 적혀있습니다. 이유가 무엇일까요?

2. updateData와 useEffect를 사용하지 않고 useQuery(()=>{ ...생략 , select:data=>data.filter(list => list.korean_name.includes(keyword) === true),} 이런식으로 받아와서 사용하는게 좋을까요? 이런 방식이 맞는건지..아직 query사용이 익숙하지 않아서 쉽지가 않네요 ㅠ 아니면 useEffect를 사용하지 않는 다른 방법이 있을까요? 밑줄 경고를 어떻게 해결해야 할지 잘 모르겠습니다.

3. 이런 방식으로 자동완성 기능을 구현해봤는데 괜찮은 것 같은지..피드백 부탁드립니당

(두가지라 해놓고 세가지 적어 놓은건 킹받으라고)

[SunNacho]

updateData를 useEffect 밑으로 이동시키니 경고표시가 사라졌네요. 여전히 궁금한 것은 react query와 useEffect를 동시에 사용해도 되는건지 궁금하네요!