인프런 커뮤니티 질문&답변

useEffect(() => { // componentDidMount, componentDidUpdate 역할

interval.current = setInterval(changeHand, 100); ----> 1번 코드

return () => { // componentWillUnmount 역할

clearInterval(interval.current); ----> 2번 코드

}

}, [imgCoord]);

위 코드에서 조금 찝찝한 부분이 있어서 질문(Q1, Q2, Q3) 드립니다.

1. 처음 RSP 함수 컴포넌트 코드가 실행되고 컴포넌트가 생성되면, 1번 코드가 실행됨

2. 0.1초 후 changeHand 함수가 실행돼서 state가 바뀜

3. state 의 변화로 RSP 함수 컴포넌트 코드가 재실행되기 전에 2번 코드가 실행된 후 기존 RSP 컴포넌트가 소멸됨

4. 함수 컴포넌트 코드가 재실행되면서 컴포넌트가 생성되면, 1번 코드가 다시 실행됨 === (1번 과정)

5. (2번 과정으로 다시 반복)

Q1. 그러면 componentDidMount 랑 componentWillUnmount 인 상황만 반복될 뿐, class 컴포넌트 라이프사이클에서의 componentDidUpdate 와 동일한 역할을 하는 상황은 Hooks에서는 만들어지지 않는 건가요?

Q2. 강의 설명에 '두 번째 인수 배열에 넣은 값(예제에서는 imgCoord)들이 바뀔 때 useEffect가 실행됨' 이라고 나와있는데, 처음 컴포넌트가 생성되었을 때 useEffect의 componentDidMount가 실행되는 것을 보면 두 번째 인수 배열에 넣은 값들이 바뀌지 않아도 useEffect는 반드시 실행되어야 하는 것 아닌가요?

또한 class 컴포넌트에서는 비동기 함수 외부에서 선언한 변수를 함수 내부에서 사용할 때 함수 내부의 변수의 참조값이 변하지 않는 문제가 생겼었는데, 함수 내부에 변수를 선언해 줌으로써 해결했던 걸로 기억합니다.

Q3. 여기서도 마찬가지로 useEffect의 두 번째 인수 배열은 외부에서 선언한 변수를 useEffect 함수 내부로 가져와서 참조관계를 그때그때 바꾸기 위한 용도로 사용된 것 아닌가요?