useEffect []

웹 게임을 만들며 배우는 React

5-5. Hooks와 useEffect

해결된 질문

작성

190

리액트에서 setState될때 리렌더링이 일어나는데

클래스는 아래 render() 부분이 다시실행되는반면

Hooks는 전체가 다시실행되버리기때문에

useEffect에 [ ] 배열이 비어있을경우 setInterval이 딱한번만 실행되고 리렌더링되버려서 그림이 더안바뀌고.

[ ] 에 useEffect로 값이변경되는 state를 넣으면 그걸 감지해서 setInterval이 다시실행되고 .반복한다.

제가 이해한 useEffect 작동원리가 이런데.. 맞는건가요?

답변 1

지식공유자

빈 배열인 경우에도 setInterval은 실행되므로 changeHand는 계속 실행됩니다. 다만 그림이 안 바뀌는 이유는 changeHand 내부의 imgCoord가 안 바뀌기 때문입니다.

그래서 imgCoord를 바꾸기 위해서 [imgCoord]를 넣은 것입니다.

이 부분 관련해서 궁금한 점이 있습니다. useEffect 두 번째 인자로 빈 배열을 둘 경우 setInterval의 changeHand 함수는 계속 실행되는데 useEffect가 이 함수 내부에 setImgCoord의 실행을 막는 것인가요?

지식공유자

아뇨 setImgCoord는 실행되는데 changeHand가 처음 선언된 함수 그대로 가는겁니다. changeHand 내부의 imageCoord도 첫 상태 그대로 가는거고요.

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