[react-native] debounce

 

 

 

 

 

📌 우당탕탕 회사 개발일지

 

 

 

debounce

 

 

사용자가 프로필 아이콘을 광클을 하면 계속해서 클릭이 돼 렌더링이 되기 때문에

아무리 광클을 해도 한번만 클릭되게 되도록 만들어야하는 이슈가 있었다..!

물론 mouseStop으로 상태로도 업데이트가 가능하겠지만 react 에서 제공하는 debounce라는 라이브러리를

사용해보기로 했다!

 

debounce란?

 

debounce는 반복적인 특정 동작을 반복되는 과정에서 강제적으로 대기하는 것

 

lodash에서 제공하는 라이브러리를 사용하면 손쉽게 만들 수 있다.

 

 

...

// debouce
import {debounce} from 'lodash';

...


  // profilepage로 가는 함수
  const handleProfileNav = () => {
    if (disableClicks) {
      return;
    }
    playClickSound();
    if (![100, 101, 102].includes(navstate)) {
      navigation.push('ProfileMain');
    }
  };

  const debouncedHandleProfileNav = debounce(handleProfileNav, 500);
  
  return (
    <TouchableOpacity
      style={styles.headerIcon}
      onPressIn={debouncedHandleProfileNav}>
      {profileImage !== TRANSPARENT_IMG && (
        <Image
          source={{
            uri: profileImage,
          }}
          style={{
            width: (screenWidth * 70) / 1194,
            height: (screenHeight * 70) / 834,
          }}
        />
      )}
    </TouchableOpacity>
  );
};

 

 

이렇게 코드를 짜면 아무리 광클해도 재렌더링되는 것을 방지하고 오류를 막을 수 있당~~~