[하루메이트] 오늘의 회고 - 22.07.10

😡 장소 리스트 리렌더링 이슈

 

지금은 검색을 하고 원하는 장소를 눌렀을 때, 장소 리스트들이 한 번 삭제됐다가 다시 불러오고 있습니다.

장소를 누를 때 마다 번쩍번쩍해버리니 보기에 딱히 좋지 않았습니다.

 

또한, 원래는 선택한 장소를 보여주는 숫자 마커가 장소를 나타내는 기본 마커위에 나타남으로써, 선택한 장소를 명확하게 보여주게 구현했는데, 검색한 장소 리스트들이 모두 삭제됐다가 다시 생성되어 숫자마커를 가려버리는 현상까지 생겼습니다.

 

문제라고 생각한 코드

useEffect(() => {
  const ps = new kakao.maps.services.Places();

  if (searchPlace)
    ps.keywordSearch(searchPlace, placesSearchCB, {
      x: Number(x),
      y: Number(y),
      radius,
    });

  return () => {
    dispatch(placeListActions.resetList());
  };
}, [searchPlace, dispatch, x, y, radius, placesSearchCB]);

useEffect 훅에서 클린업으로 장소리스트를 초기화하고 있었습니다.

그래서 원하는 장소를 누를 때 마다 리렌더링이 발생해 매번 초기화를 하게 되어 번쩍이게 되고, 마커도 덮혀쓰여졌던 것 같습니다.

 

수정한 코드

useEffect(() => {
  const ps = new kakao.maps.services.Places();
  if (searchPlace)
    ps.keywordSearch(searchPlace, placesSearchCB, {
      x: Number(x),
      y: Number(y),
      radius,
    });
}, [searchPlace, dispatch, x, y, radius, placesSearchCB]);

const handleCategory = () => {
  setChoiceCategory(true);
  setChoiceDirect(false);
  dispatch(placeListActions.resetList());
};

const handleDirect = () => {
  setChoiceCategory(false);
  setChoiceDirect(true);
  dispatch(placeListActions.resetList());
};

useEffect 내부의 클린업을 지워주고, 카테고리 검색 - 직접 검색 버튼을 누를 때 장소 리스트를 초기화하게 하였습니다.

 

---

 

😇 DirectSearch 컴포넌트를 불러올 때 렌더링 이슈?

 

DirectSearch 컴포넌트는 원하는 장소의 이름을 직접 입력하고 싶을 때 사용하는 컴포넌트입니다.

(제일 위에 있는 gif에서 확인할 수 있습니다.)

 

이 경고에 대해 찾아봤더니 다른 구성 요소를 렌더링하는 동안 구성 요소의 상태를 업데이트하려고 할 때 발생한다고 합니다.

 

에러가 생긴 코드

const DirectSearch = () => {
  const [searchPlace, setSearchPlace] = useState('');
  const inputRef = useRef<HTMLInputElement>(null);
  const dispatch = useDispatch();

  dispatch(selectedIdActions.setCategoryId(''));
  dispatch(selectedIdActions.setTagId(''));

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (inputRef.current) {
      setSearchPlace(inputRef.current.value);
      inputRef.current.value = '';
    }
  };

  return (
    <>
      <FormContainer onSubmit={handleSubmit}>
        <SearchContainer ref={inputRef} />
      </FormContainer>
      <PlaceList searchPlace={searchPlace} />{' '}
    </>
  );
};

DirectSearch안에 있는 setState 호출에 대해서 문제가 발생한다고 나와있는 것 같아서 setSearchPlace를 고쳐보았는데 변함이 없었습니다.

 

그런데 다시 코드를 보니 이상한 부분이 있습니다.

const DirectSearch = () => {
  
  ...

  dispatch(selectedIdActions.setCategoryId(''));
  dispatch(selectedIdActions.setTagId(''));

  ...
};

저 dispatch들은 직접 검색으로 넘어올 때, 카테고리 검색에서 선택한 반경과 태그를 초기화하기 위해 사용했습니다.

그런데 dispatch 작업은 일반적으로 이벤트에 대한 응답이거나 useEffect 훅 내에서 수행되어야 한다고 합니다.

그래서 리렌더링이 될 때마다 불필요하게 dispatch가 호출이 되어 계속 쓸데없이 초기화되고 있었습니다

 

변경한 코드

const DirectSearch = () => {
  const [searchPlace, setSearchPlace] = useState('');
  const inputRef = useRef<HTMLInputElement>(null);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(selectedIdActions.setCategoryId(''));
    dispatch(selectedIdActions.setTagId(''));
  }, [dispatch]);

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (inputRef.current) {
      setSearchPlace(inputRef.current.value);
      inputRef.current.value = '';
    }
  };

  return (
    <>
      <FormContainer onSubmit={handleSubmit}>
        <SearchContainer ref={inputRef} />
      </FormContainer>
      <PlaceList searchPlace={searchPlace} />{' '}
    </>
  );
};

그래서 useEffect를 사용하여 안에 넣어주었습니다.

그랬더니 에러가 사라졌습니다...!

 

사실 이게 어떤 원리로 해결이 되는지는 정확하게 모르겠습니다...😭😭😭