React 공부 - Hooks의 LifeCycle ( useEffect)

React Hooks Component에는 LifeCycle이 존재하지는 않지만, 흉내 낼수 있다.

 

그것이 useEffect이다.

 

 useEffect(()=>{ // componentDidMount, componentDidUpdate 역할 (1대1 대응은 아님)
    interval.current = setInterval(changeHand,100); // 반복할 함수 interval은 Ref 
    return () => { clearInterval(interval.current)} // componentWillUnmount 역할
  }, [변경될 state]); // 두번째 인수가 클로저 문제 해결해주는 역할

만약, 변경될 state에 아무것도 넣지 않는다면 처음 실행되고 다시 실행되지 않는다.

 

두번째 인자에 아무것도 안넣으면, componentDidMount 

두번째 인자에 변경될 state를 넣으면, componentDidUpdate

 

return() => {} 구문은 componentWillUnmount 

useEffect(()=>{ // componentDidMount, componentDidUpdate 역할 (1대1 대응은 아님)
    console.log('다시 실행');
    interval.current = setInterval(changeHand,100);
    return () => { 
        console.log('종료');
        clearInterval(interval.current)} // componentWillUnmount 역할
  }, [변경될 state]); // 두번째 인수가 클로저 문제 해결해주는 역할

이런식으로 useEffect를 구성하고 결과를 확인해보면, 

 

계속 다시실행, 종료가 console에 출력되는 것을 볼 수 있는데, 

 

이것은 hooks component는 render 될때 마다 hooks component 전체를 재실행하기 때문에 발생하는 현상이다.

 

 

class Component LifeCycle VS hooks Component UseEffect

 

class Component의 경우 state 에 따라 다른 LifeCycle을 가지게 하고싶을 경우

ComponentDidMount , ComponentDidUpdate 에서 조건문으로 처리한다.

 

hooks Component의 경우에는 , UseEffect를 여러개를 작성하고 , 두번째 인자(배열)만 변경해주면 된다.

 

※ useLayoutEffect 는 레이아웃 변경점(창을 늘렸다 줄였다)하는 것을 감지하기 위해 사용한다.