[React] useEffect 와 CleanUp 작동방식 이해하기 + input 입력완료 후 감지 코드예시

useEffect 를 먼저 살펴보자면

리액트는 실제 DOM의 렌더링과 상태값의 변경을 감지해 화면에 올바르게 반응하는 것과 관련된 일을 한다. 그리고 이와 별개의 일들 즉, 호출과 통신 등 따른 기능과 그 호출에 따른 반응들의 관련된 이펙트들을 'side Effect' (사이드이펙트)라고 한다.

실제로 직접적으로 컴포넌트 함수에 들어가게 된다면 버그나 무한루프에 빠질 가능성이 높은 사이드 이펙트들은, 사이드 이펙트를 활용하기 위한 도구 useEffect를 사용해서 동작하도록 해야 한다.

 

> useEffect 사용예시

useEffect(()=>{
// 실행 함수 넣어주는 곳
}, [ // 의존변수 넣어주는 곳 ])

 

useEffect는 두 개의 매개변수와 두 개의 인수와 같이 호출되며, 의존변수를 의 상태를 확인해 실행함수를 실행시킨다. 의존변수 항목이 [ 빈배열 ]인 경우 초기 렌더링 시에만 호출되며 이후에는 호출되지 않는다. 결과적으로 의존변수가 있는 경우 상태값에 따라 useEffect 내부 로직이 실행된다고 볼 수 있다.

 

Form에서 사용자가 손을 뗀 경우 호출하고 싶어졌다.

사실 useEffect의 개념은 매우 간단해서 다른 UI적인 부분에서는 무리 없이 사용이 가능했다. UI작업 중에서도 form요소를 만질 때, 가장 까다로운 게 유효성 테스트였는데 일일이 input 상태를 바꿔주는 일도 그렇지만 무엇보다도 회원가입 작업에서 전체 form 이 입력되었을 때 버튼활성화 라든가, 비밀번호와 관련된 유효성 로직을 짠 경우에는 더더욱 그랬다. 그때 들었던 생각이

"사용자가 입력을 멈췄을 때 한번 동작하게는 못하나?"라는 생각이었다.

(물론 대부분의 개발자들이 이런 고민을 할 거라 생각한다)

 

기존에 리액트에 이런 기능을 도입하기 위해서 lodash기능을 사용하거나 코드를 새로 짜야 하나?라는 생각을 했는데, react에 clean up 함수를 사용해 효율적으로 관리가 가능했다. 

 

Clean up (클린업) 함수는 useEffect 함수가 실행되기 전에 감지된다

useEffect(() => {
	const time = setTimeout(() => {
    	setForm(//유효성 코드);
       };
      }, 500)
      
     // Clean up 
     return () => {
     	clearTimeout(time);
     };
 }, [email,password]);

해당 코드처럼 유효성 코드를 setTimeout에 걸어놓고 clean up 코드 내부에 clearTimeout을 걸어놓으면 입력이 될 때마다 clearTimeout이 실행되어 useEffect 내부함수가 실행되지 않고, 입력이 멈춘 후 내부 함수가 실행된다.

 

clean up 함수가 내부함수보다 먼저 실행되기 때문에 입력이 멈춘 뒤 딱 한 번만 로직을 실행시키는 것이 가능하다.

 

사실 이전에는 실무경험이 없어서 기초강의를 들어도 "아~ 이런 게 있군" 하고 넘겼을 요소들인데, 확실히 실무경험이 쌓이고 나서 기초강의를 들으니 이전보다 더 많은 것들을 이해할 수 있어서 좋다 :-)