항해99 12기 - 230405TIL

오늘 배운 것

아래와 같은 axios 코드로, 친구이름을 검색했을때 친구 목록을 보여줬다.

  const findFriend = () => {
    axios
      .get(`${process.env.REACT_APP_BASEURL}/search?name=${friendName}`, {
        headers: { Authorization: accessToken },
      })
      .then((res) => {
        console.log(res.data);
        setList(res.data);
      })
      .catch((err) => console.log(err));
  };

 const onChangeInput = (e) => {
    setFriendName(e.target.value);
  };

  const handleKeyDown = (event) => {
    if (event.key === "Enter") {
      findFriend(event);
    }
  };

그런데.. 사용자관점에서 생각해보면, 저 ui에서 엔터를 칠 생각을 할까..? 그냥 ㄱ만 쳐도 (엔터없이) ㄱ관련 모든게 쭈르륵 나올꺼라고 생각하지 않을까.. 라고 생각이 들어서 친구이름으로 친구목록을 가져올때 엔터없이 가져오는 법을 찾아봤다. onChangeInput에 findfriend()를 하면 된다는데.. 그렇게 하니까 ㄱ을 치면 아무것도 안나오고, 고를 치면 ㄱ을 검색했던게 나오고.., 자꾸 한박자씩 느리게 나왔다. ㅠㅠ

밑에 참고한 웹사이트를 보니 useState를 이용해서 상태 업데이트를 하면 변경사항이 즉시 반영되지 않는다고 한다.

useRef를 사용해서 해결했다고 하니, 나도 useRef사용!

const findFriend = async () => {
    try {
      const res = await axios.get(
        `${process.env.REACT_APP_BASEURL}/search?name=${inputRef.current}`,
        {
          headers: { Authorization: accessToken },
        }
      );
      console.log(res.data);
      setList(res.data);
    } catch (err) {
      console.log(err);
    }
  };

  let inputRef = useRef();

  const onChangeInput = (e) => {
    inputRef.current = e.target.value;
    if (inputRef.current == '') {
      setList([]);
    } else {
      findFriend();
    }
  };

ㄱ치면 ㄱ결과 나오고, 고 치면 고 결과나오고 아주 잘나온다.
이제 debounce까지 걸어서 최적화까지 해주자!

참고한 웹사이트

https://gyyeom.tistory.com/87