3. useEffect 바로알기 with. 클린업 프로세스, 디바운싱

useEffect의 사용

useEffect는, 사이드이펙트를 막는데 아주 유용하다.

 

기본사용 : useEffect( ( ) => { 실행함수 } , [ 종속성 ] )

 

useEffect의 기본적인 사용법

 

1. 시작할때 한번만 : 종속성에 state를 넣는다.

 

2. 무언가 변할때마다 : 종속성에 변하는것(state)를 넣는다.

    종속성에는 여러 state 를 넣을 수도 있다, [name, password, id ...]

초기에 한번 실행되고, 이후, 종속성 값이 변할때마다 실행된다.

 

3. 클린업 프로세스를 이용한다

  useEffect 를 사용할때, "반환하는 함수"를 만들 수 있다.(화살표 함수도, 선언문 함수도 괜찮다.)

  이 함수를 "클린업 함수" 라고 부른다.

  [클린업 함수의 실행 타이밍]

            1. 클린업 함수는, useEffect 내부의 함수가 "실행되기 직전" 에 실행된다.

 

            2. "첫번째 useEffect 내부의 함수가 실행된 이후"부터 실행이 시작된다.

 

  [코드 예시]

    [ 결과 ]

 첫번째 실행된 이후, name 이 변화할때, 변화하기 직전에 한번씩 실행된다.

 

실제 사용!

 ** useEffect를 이용하여, 디바운싱을 만들기 with "클린업함수", Check Validation

    [목적] 

              "중간에 타자를 치다가, 멈추면 그 이후에, Validation Check 를 하게 한다."

 

              "타이핑 중간에는 Validation Check 를 하지 않는다."

 

     [방법]

           

    1) setTimeout 을 이용하여, 몇 초 후에, state에 기록되게 한다.

    2) useEffect에, 종속성을 추가하여, setTimeout 함수가, 조건부 실행되게 한다.

    3) 만약 중간에, "시간이 다되기전, 새로운 setTimeout이 시작되게 되면(다시 타이핑을 시작하면)",

        "클린업함수" 를 이용하여, "setTimeout 의 흘러가던 시간을 reset"한다.

        => 결국 "중간에 멈추지 않으면, setTimeout의 시간은 다시 reset 되고",

              최종적으로 한번만 "setTimeout의 콜백함수가 실행되게 만드는 것"이다.

 

1. 기본 뼈대 만들기

 

 setTimeout 함수를 setTime 변수에 집어넣고, clearTimeout 을 사용하여,

 2초안에 한번이라도 타이핑을 하면, 흘러가던 시간을 리셋한다.

 

2. validation 완성

 

2초안에 타이핑을 계속 하게되면, Validation Check 을 하지 않는다.

타자를 전부 치고 2초를 기다리면 Validation Check 을 한다.

 

   응용 !  

1. 타자를 전부 치고나서, 잠깐 (0.5초정도?) 기다리면, 기본 Validation이 활성화 되게 만든다.

2. 기본 Validation 이 Ok 라면, Submit 버튼을 활성화한다.

 

 ** 기본 validation check : 아이디는 쳤는지, 비밀번호는 쳤는지, 아이디에 @가 들어가는지 등...

 

디바운싱