useEffect 의존성배열

Question

의존성 배열에 보통 배열이나 객체를 넣지 않는 게 좋다고 어디서 본거 같은데 useState으로 만든 객체나 배열은 상관이 없고 const a = {a: 1, b:2} 이런 거나 const b = []; 이렇게 초기화 된 것들만 넣지 말라고 하는 것인가요? 맞다면 이유는 const a 랑 const b는 리렌더 될 때마다 참조 값이 바뀌고 useState으로 만든 것은 리렌더링이 되어도 set 함수가 쓰이지 않는 이상 참조 값이 바뀌지 않아서 그런 건가요?

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. Juhyeon Lee님. useEffect의 의존성 배열에 대해 궁금하신 점이 있군요. 의존성 배열에 배열이나 객체를 넣을 때 발생할 수 있는 문제에 대해 설명해드리겠습니다. 왜 의존성 배열에 객체나 배열을 넣지 않나요? const a = {a: 1, b: 2} 같은 객체나 const b = [] 같은 배열은 리렌더링이 될 때마다 새로운 참조 값(메모리 주소)을 가지게 됩니다. 이는 JavaScript의 참조형 데이터( Object , Array )의 특성 때문입니다. 따라서, useEffect의 의존성 배열에 이러한 객체나 배열을 넣으면 리렌더링이 될 때마다 참조 값이 변경되어, useEffect가 매번 실행됩니다. useState로 만든 경우에는 왜 괜찮은가요? useState 로 생성한 객체나 배열은 그 상태(set 함수)가 호출되지 않는 한 참조 값이 변경되지 않습니다. 이는 React가 useState 로 관리되는 상태의 참조 값을 보존하기 때문입니다. 따라서, useState로 관리되는 객체나 배열은 의존성 배열에 넣어도 안정적이라고 볼 수 있습니다. 핵심 요약 일반 객체/배열 : 리렌더링 시마다 새로운 참조 값이 생성되어, 해당 객체/배열을 의존성 배열에 넣으면 불필요하게 많은 effect 호출을 유발할 수 있습니다. useState로 관리하는 객체/배열 : 상태가 변화하지 않으면 참조 값이 변경되지 않아서, useEffect의 불필요한 실행을 방지할 수 있습니다. 관련 논의 및 예제를 더 보고 싶으시다면, 아래에 있는 유사한 질문을 참고해 보세요: useEffect 사용하신 이유가 궁금합니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

이정환 Winterlood · Answer

안녕하세요 이정환입니다. 음 저는 그런 이야기는 처음 들어보기는 하는데요...! 필요하다면 객체나 배열도 의존성 배열에 넣어야 하는 경우도 있습니다. 왜 권장하지 않는지 짐작해보자면 아마 말씀하신대로 객체 타입의 값(배열, 객체, 함수 등)들은 주소값으로 비교되기 때문에, 값이 변화해도 알아차리지 못하거나 반대로 값은 그대로인데 새로운 객체가 생성되어 변화되었다고 간주하게 되는 경우가 생길 수는 있을 것 같아요 그러나 이를 잘 주의하시면서 꼭 필요한 부분에 사용하시면 크게 문제가 될 것 같아 보이지는 않습니다.