useEffect를 사용하면서 input의 value값을 제거하는 방법

React
1 
const [keyword, setKeyword] = useState("")    // 키워드
const [resultList, setResultList] = useState([])    // 키워드에 대한 결과를 담아주는 배열

// 검색 디바운스(한글자 칠때마다 새로 업데이트 방지)
const onChageKeyword = _.debounce((e: any) => {
    setKeyword(e.target.value);
}, 500);

// 버튼 누르면 입력한 value 삭제    =>
const onClickRemoveKeyword= () => {
    setKeyword("");
};

// 키워드에 대한 결과를 불러와주는 get api
const searchData = async () => {
    try {
        const result = await axios.get("/api/search?string=${keyword}")
        setResultList(result.data)
    } catch (e) { console.log(e) }
}

// 키워드를 입력해서 keyword 값이 바뀔때마다 기능을 실행시켜주는 hook
useEffect(()=>{
    searchData ()
}, [keyword])

retrun (
    <input
        type="text"
        onChange={onChageKeyword}
        value={keyword}    // >> 여기!! <<
    />
    <button
        type="button"
        onClick={onClickRemoveKeyword}
    >
        지우기
    </button>
)

>> 여기 << 부분을 주석한 상태에서

  1. 키워드를 입력 => keyword가 debounce를 통해 적당한 state 새로고침으로 데이터가 들어감
  2. keyword가 바뀔때마다 useEffect를 이용해 검색 함수를 실행
  3. 실시간으로 결과가 잘보임!
  4. 그러나!! 입력했던 키워드 전체를 지우려고 버튼을 누르면 state는 초기화가 돼서 불러오는 리스트는 초기 세팅으로 바뀌지만
    input에 있는 값은 지워지지 않습니다.

value={keyword}를 하면 지워지는 방법은 알고 있지만,
useEffect를 사용해서인지 debounce를 사용해서인지
>> 여기 << 부분을 주석을 풀면, input에 글자가 입력조차 안됩니다.
어떻게 해결해야할까요?

2

안녕하세요. 질문 내용과 관계없이 아래 부분이 눈에 들어와 댓글납깁니다. :slight_smile:

이 코드에서 의도하신 debounce는 정상적으로 동작하지 않습니다. 왜냐하면 rendering 될때마다 debouce로 동작하게 하는 새로운 함수가 생성되기 때문입니다.
react 18을 이용하신다면 기본 내장된 useDeferredValue를 이용해보세요.

아니면 ahooks 같은 라이브러리의 useDebounce를 이용하는 것도 방법입니다.

https://ahooks.js.org/hooks/use-debounce

1개의 좋아요
3

일단 안되는 이유는 아마도 keyword가 비어있을 경우 api에서 error가 나서 setResultList할게 없으니 기존 값 그대로 보여질 것 같네요.

1개의 좋아요
4

감사합니다!!!
에러가 나지만 흑흑 일단 회사에서 시간이 없어서 그대로 갈거같아요.
다음주부터 qa진행한다고 하셔서 그때 수정할 것 같습니다!!
소중한 조언 정말 감사합니다!!

1개의 좋아요