[study] 중복함수실행방지

커뮤니티 기능 구현 중 

글쓰기 버튼을 두 번 누르니, 글쓰기 함수가 두 번 실행되어 글이 중복 작성되는 오류를 발견하였다.

 

구글링 결과 해결방법은

1. state를 만들어 버튼 disabled 속성에 적용한다.

2. 버튼을 눌렀을 때 state값이 true로 변하게 하여 버튼이 눌리지 않게 한다.

3. 혹시나 눌렀을 경우를 대비해 버튼을 눌렀을 때 실행되는 함수에서도

실행되었을 때 state값이 true로 변하게 하여 버튼이 눌리지 않게 한다. //그러면 2번에서 혹시나 중복으로 누르게 되었어도 첫 번째 함수가 실행되었을 때 state값이 true 가 되므로 함수가 두 번 실행되지 않는다.

함수가 끝났을 때는 다시 state가 false로 바뀐다.(state의 기본값)  

 

예)

1. state 값 설정

#<함수 Page/>

  const [isSuccess, setIsSuccess] = useState(false);    //기본값은 false/ 버튼 disabled에 적용할 state. 

 

// 나의 경우 form이 함수가 있는 페이지와 분리되어 있어서 state를 바꿔야 하는 코드를 작성해야 했다.  

const successButton = on => {  

    setIsSuccess(on)

  };

 

<Form

   successButton={successButton}      // state를 변경할 값

   isSuccess={isSuccess}                    // state값

/>

 

2. 함수를 실행하는 버튼 속성에 적용

#<Form/> 페이지

 

<TouchableOpacity

   disabled={isSuccess}     //isSuccess== true일 때 비활 / false일 때 활성화

   onPress={() => {

         successButton(true);    // 버튼 누르면 누르면 isSuccess== true

         submit();                        // 함수실행

   }}>

...

</TouchableOpacity>

 

#<함수 Page/>

submit()=>{

. then에 추가

            setIsSuccess(true);                //함수 실행되면 isSuccess== true가 되어 <Form/> 페이지의 버튼이 비활성화

}

 

버튼과 함수에 모두 state값이 변경되도록 작성하여 혹시 모를 중복함수 실행의 경우를 대비하였다.