React component life cycle

* class의 경우 

1. constructor() 
2. render()
3. ref
4. componentDidMount() (렌더함수가 실행되고 리액트가 jsx를 돔에 붙이는 순간!)
5. setState/props 바뀜
6. shouldComponentUpdate값이 true (false면 7,8번 건너뛰고 9번으로)
7. render()
8. componentDidUpdate()
9. (부모가 나를 없앴을 때) componentWillunmount() (부모가 나를 없애지 않으면 9, 10번은 없음)
10. 소멸

 

* Hooks의 경우

따로 lifeCycle 없지만 UseEffect로 비슷하게 할 수 있음.

useEffect(() => {
       // 여기에 componentDidmount, componentDidUpdate 로직

        return() => {
            여기에 componentWillUnmount 로직
        }
    }, [대상 state 배열]);

- [대상 state 배열]이 빈 배열이면, componentDidmount() 랑 똑같다.

- [대상 state 배열]에 값이 있으면 componentDidmount(), componentDidupdate() 둘 다 수행

- [대상 state 배열]에 조건문이나 useRef를  넣을 수도 있음.

- [대상 state 배열]에 들어가는 값이 배열일 경우, "timeouts.current[i] = x; " 이렇게 배열의 요소 값 변경하는건 감지 못함.  

    "timeouts.current = x;" 이렇게 직접 변경하는경우만 감지.