timeouts.current를 useEffect 의 input값으로 넣었을때

Question

timeouts.current가 useEffect의 input 인자로 들어간거에 대해서 헷갈려서 제가 이해한게 맞는지 1번 확인 부탁드립니다. 2번은 질문입니다.   useEffect에서 input 인자에 값이 있으면, componentDidUpdate도 수행한다고 하셨는데요. componentDidUpdate는 state의 값이 변할 때마다 수행이 되는거잖아요. 그러면 timeouts.current값이 변할때마다 useEffect안에 있는 내용이 실행된다는 건데, onClickRedo를 해줬을 때 timeouts.current에 직접 [] 를 설정해줬으므로, 값이 변해서 다시 useEffect를 실행해주는게 맞을까요? timeouts.current[i] 이 부분에서 timetouts.current 의 값이 변하는게 아니라고 하셨는데, 배열에 값을 넣어주는 것이 왜 timeouts.current가 변하는게 아닌건지 잘 모르겠어요...값을 넣어준다해서 배열이 달라지는게 아닌걸까요?

제로초(조현영) · Answer

일단 먼저 첨언드리자면 영상 찍을 때와 세상이 많이 달라져서 class 컴포넌트는 사실상 없어졌습니다. commponentDidUpdate같은 거는 이제 잊어버리셔도 됩니다. 1번과 2번 질문이 연관이 있는데요. timeouts.current를 useEffect deps 배열 안에 넣어도 아무 일도 일어나지 않습니다. timeouts.current는 언제나 같은 값(배열)입니다. const a = [1, 2, 3]이 있고, a[i] = 다른값;을 해도 a는 여전히 a입니다. 이 의미입니다. const b = a;를 하고 아무리 a[i]를 바꾸고 b[i]를 바꿔도 여전히 a === b입니다. 즉 useEffect deps에 넣은 timeouts.current는 절대 값이 바뀌지 않습니다.

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. gmldnjs0402님. 질문에 대해 답변을 드리겠습니다. 1. useEffect의 input 인자와 componentDidUpdate useEffect에서 두 번째 인자가 주어진 경우 그 인자의 변화에 따라 useEffect 내부의 코드가 실행됩니다. 일반적으로 리액트에서 이 두 번째 인자를 의존성 배열(dependency array)라고 부르며, 배열 안에 포함된 값이 변경될 때마다 useEffect가 다시 실행됩니다. timeouts.current 이 의존성 배열로 들어가게 된다면, timeouts.current 의 참조가 변경될 때마다 useEffect가 실행됩니다. onClickRedo 함수 내에서 timeouts.current 에 새로운 빈 배열이 할당되는 경우, 이는 참조 변경을 야기하므로 useEffect가 재실행됩니다. 예를 들어, onClickRedo 에서 timeouts.current 가 새로운 배열로 재초기화되면, useEffect가 이 변화를 인식하고 다시 실행됩니다. 2. timeouts.current[i]가 의존성 배열에 영향을 주지 않는 이유 timeouts.current 자체는 리액트가 변화 여부를 추적해야 하는 객체의 참조를 나타냅니다. 객체 내 값을 변경하는 것은 참조를 변경하지 않기 때문에 리액트는 이것을 state나 prop의 변화로 간주하지 않습니다. 즉, 타임아웃 배열의 특정 인덱스에 값을 설정하는 것은 timeouts.current 의 참조가 바뀌지 않기 때문에 useEffect의 재실행 조건이 만족되지 않습니다. 리액트에서는 timeouts.current 와 같이 객체의 내부 값을 변경해서는 컴포넌트의 상태 변화로 유도되지 않으며, 정확히 말하자면 이는 리액트의 상태 관리 패턴 밖에서의 변경에 해당합니다. 관련된 답변을 찾아보니, 비슷한 질문이 useRef 관련 질문 에도 있으며, 이곳에서 useRef 의 특성과 내부 변경이 리렌더링을 촉진하지 않는 이유에 대해 설명하고 있습니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.