useEffect 부분 질문 있습니다.

Question

useEffect(() => { // componentDidMount, componentDidUpdate 역할 interval.current = setInterval(changeHand, 100); ----> 1번 코드 return () => { // componentWillUnmount 역할 clearInterval(interval.current); ----> 2번 코드 } }, [imgCoord]); 위 코드에서 조금 찝찝한 부분이 있어서 질문(Q1, Q2, Q3) 드립니다. 처음 RSP 함수 컴포넌트 코드가 실행되고 컴포넌트가 생성되면, 1번 코드가 실행됨 0.1초 후 changeHand 함수가 실행돼서 state가 바뀜 state 의 변화로 RSP 함수 컴포넌트 코드가 재실행되기 전에 2번 코드가 실행된 후 기존 RSP 컴포넌트가 소멸됨 함수 컴포넌트 코드가 재실행되면서 컴포넌트가 생성되면, 1번 코드가 다시 실행됨 === (1번 과정) (2번 과정으로 다시 반복) Q1. 그러면 componentDidMount 랑 componentWillUnmount 인 상황만 반복될 뿐, class 컴포넌트 라이프사이클에서의 componentDidUpdate 와 동일한 역할을 하는 상황은 Hooks에서는 만들어지지 않는 건가요? Q2. 강의 설명에 '두 번째 인수 배열에 넣은 값(예제에서는 imgCoord)들이 바뀔 때 useEffect가 실행됨' 이라고 나와있는데, 처음 컴포넌트가 생성되었을 때 useEffect의 componentDidMount가 실행되는 것을 보면 두 번째 인수 배열에 넣은 값들이 바뀌지 않아도 useEffect는 반드시 실행되어야 하는 것 아닌가요? 또한 class 컴포넌트에서는 비동기 함수 외부에서 선언한 변수를 함수 내부에서 사용할 때 함수 내부의 변수의 참조값이 변하지 않는 문제가 생겼었는데, 함수 내부에 변수를 선언해 줌으로써 해결했던 걸로 기억합니다. Q3. 여기서도 마찬가지로 useEffect의 두 번째 인수 배열은 외부에서 선언한 변수를 useEffect 함수 내부로 가져와서 참조관계를 그때그때 바꾸기 위한 용도로 사용된 것 아닌가요?

제로초(조현영) · Answer

무슨 말씀인지 잘 모르겠습니다. 저 코드는 componentDidUpdate 역할을 주로 합니다. return 부분도 componentDidUpdate가 실행되기 전에 매번 실행됩니다. componentDidMount와 componentWillUnmount 부분 역할은 처음과 끝에서 한번만 일어날 뿐이고 useEffect 대부분 componentDidUpdate 역할을 하는 겁니다. useEffect는 무조건 한 번은 실행됩니다. 그 부분이 componentDidMount 부분이겠고요. 네 맞습니다. imgCoord가 바뀌는 순간의 changeHand 함수를 setTimeout에 넣기 위함입니다.