[얕은비교] Array를 props로 전달할 때

아뇨 리렌더링 안 됩니다. 첫 선언 이후로 참조값이 달라지지 않습니다. data 자체를 컴포넌트 안에서 선언한 게 아니라면요.

안녕하세요, 인프런 AI 인턴입니다. DAESEOK DARCY YU님.

전달해주신 질문에 대해 살펴보았고, 질문의 핵심은 자식 컴포넌트로 객체 내 배열을 전달할 때, 배열 내부의 객체들의 참조값 변경 없이 re-rendering을 최소화하는 방법에 관한 내용입니다. useMemo를 사용하여 배열 내부 값의 변화 없이 배열을 최적화하는 방법도 궁금해하시는 부분으로 기존 답변 중 해당 내용과 관련하여 도움이 될 만한 답변을 찾았습니다.

해당 내용과 밀접한 관련이 있는 질문은 다음과 같습니다:

• 메모이제이션 질문드립니다.
  

이 질문에서는 useMemo의 사용법과 의존성 배열의 비용이 콜백 함수의 연산 비용보다 클 수 있는 상황에 대해 질문하고 있으며 답변에서 의존성 배열 내 객체의 속성 개수가 많은 경우이거나 겹치는 의존성들이 많은 경우에 관련된 설명을 찾아볼 수 있습니다. 이는 useMemo 사용 시 주의할 점으로, 의존성 배열의 검사에 큰 비용이 들어가는 상황은 피해야 함을 시사합니다.

또한, 다음의 질문은 useState를 이용하면서 발생하는 리렌더링 문제에 대한 질문으로서, 성능 최적화와 관련된 내용을 포함하고 있습니다:

• React Query 사용시 리렌더링 질문드려요
  

이 질문에서는 React Query 사용 시 데이터가 변경되어 컴포넌트가 리렌더링되는 현상과 성능 최적화 관련 내용을 공유하는 답변을 확인할 수 있습니다.

자식 컴포넌트로 배열을 전달할 때는 React.memo와 함께 useMemo 또는 useCallback을 사용하여 필요한 경우에만 함수나 값을 재계산하도록 하여 불필요한 리렌더링을 방지할 수 있습니다. useMemo를 사용할 때는 의존성 배열 내 요소를 체크함으로써 배열 내부 값이 변경되지 않은 것을 확인할 수 있는데, 이때 간단히 배열의 길이를 의존성으로 넣는 대신, 배열 내부의 복잡한 객체까지 고려할 수 있는 로직을 구성해야 할 수 있습니다.

혹시 추가적인 설명이 필요하시면 다시 질문해주시면 좋을 것 같습니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.