컴포넌트의 라이프사이클, useEffect

 

컴포넌트가 랜더링 되면 DOM Tree에 붙는 순간이 있을 것입니다. 그 붙는 순간에 특정작업을 할 수 있게 하는 것이 componentDidMount입니다. componentDidMount는 처음 랜더가 성공적으로 실행되었을 때 실행됩니다. 그 후 setState같은 것으로 rerendering이 일어날때는 componentDidMount는 실행되지 않습니다

 

mount는 ~을 조직하여 시작되는 것을 의미한다. 즉, DOM Tree가 조직되어 시작되는 것이다

구체적으로 언제 componentDidMount가 유용하게 사용되는가? setSTate를 render함수 내에서 쓰면 무한히 리랜더링이 일어나기 때문제 setState를 render함수 내부에서는 쓸수 없다는 것을 배운적이 있다. 즉 상태는 바꾸고 싶지만 render함수 내부에는 쓸 수 없을때 바뀌는 행위를 componentDidMount안에 작성하는 것입니다. 

반대로 컴포넌트가 제거되는 시점에 특정작업을 할 수 있게 하는 것이 componentWillUnmount입니다. 주로 componentDidMount에서 취했던 행위를 제거하는 내용을 componentWillUnmount안에다 넣어줍니다. 

마지막으로 componentDidUpdate가 있습니다. 첫번째 랜더링이 일어났을때 실행되는것이 componentDidMount였다면 그 후에 setState로 상태가 변하거나 props의 상태가 변하면 render함수가 재실행되는데 그것처럼 리랜더링 시점에 실행되는 것이 componentDidUpdate입니다. 

이렇게 해서 componentDidMount, componentDidUpdate, componentWillUnmount를 컴포넌트의 라이프사이클이라고 합니다. 

이 3가지를 적용해 보면 아래와 같다.

1. 클래스 컴포넌트의 경우: constructor(여기서 생성자라고 하면 별거없이 state정의 부분과 함수 정의 부분이 실행되는 것을 말함. 여기서 실행된다는 것은 클래스 컴포넌트에 state와 내가 정의한 함수에 붙는 다는 말. Dom트리에 컴포넌트가 붙으므로) => render함수실행 => ref함수 실행 =>componentDidMount => (setState실행/props바뀔때)render함수 실행 (=> shouldComponentUpdate존재한다면 실행됨) => componentDidUpdate => 부모가 나를 없앴을 때 => ComponentWillUnmount =>소멸

==================================================================================

훅스의 경우 componentDidMount, componentDidUpdate, componentWillUnmount가 존재하지 않습니다. 즉, 훅스에는 엄밀히 라이프 사이클이 존재하지 않지만 존재하는것처럼 흉내를 낼수 있습니다.

어떻게 흉내를 내나? useEffect라는 훅을 사용해서!

useEffect를 사용하여 componentDidMount, componentDidUpdate, componentWillUnmount의 역할을 수행할 수 있습니다!!

 

useEffect의 두번째인자인 배열을 빈배열로 두면 "뭐가 바뀌든 신경쓰지 않겠다"는 의미입니다. 처음에만 첫번째 인수로 온 함수를 한번 실행하고 imgCoord가 바뀌어도 신경쓰지않고 첫번째 인자로 온 함수를 실행하지 않겠다는 의미입니다.

만약 이와 같이 2번째인자로 배열안에 imgCorrd가 오면 changeHand함수의 setImgCoord에서 imgCoord값이 바뀌므로 그 때마다 useEffect의 첫번째 인자로 온 함수가 imgCoord값이 바뀔때마다 실행되는 것입니다. 즉 useEffect의 2번째 인자의 배열안에 아무 것도 넣지 않으면 componentDidMount의 역할을 하는 것이고 무언가를 넣으면 componentDidUpdate의 역할을 하는 것입니다.

useEffect를 이렇게 정의만 해놓고 따로 호출하는 것은 아님!!! 정의만 하면 그 역할을 함!

복습! 함수형 컴포넌트에서 아래에서 내가 정의한 setResult, setImgCorrd...와 같은 함수로 state를 변화시키면 컴포넌트 전체가 리랜더링됨(함수도 재정의 된다는 말)

 

각 상태마다 다양한 효과를 내기 위해 useEffect를 아래와 같이 여러번 사용할 수도 있습니다.

 

마지막으로 남기고 싶은 내용은 훅에서 라이플사이클이라고 하면 useEffect를 생각하면 된다는 것이다.