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

안녕하세요.

이 질문은 글로 설명하기가 조금 어려울 수 있지만, 최대한 쉽게 풀어보겠습니다.
정말 핵심을 잘 짚은 질문이에요.

예를 들어서,
todos 상태에 선언된 배열의 메모리 주소가 0x01이라고 가정해보겠습니다.

todos 배열에는 3개의 todo 객체가 들어 있다고 할게요.
각각의 todo는 다음과 같은 메모리 주소를 가진다고 가정하겠습니다: 0x0a, 0x0b, 0x0c.

이를 데이터 구조로 표현하면 다음과 같습니다.

[0x0a, 0x0b, 0x0c] -> 0x01 (배열 자체)

새로운 할 일을 등록할 때는 불변성(immutability) 을 유지해야 하므로,
배열 자체(껍데기)는 새로 만들어 교체하지만 내부의 객체(알맹이)는 그대로 사용합니다.

예를 들어 다음과 같이 상태를 업데이트합니다.

setTodos(todos => [...todos, {}])

이렇게 하면 기존 배열의 메모리 주소였던 0x01은 변경되어,
새로운 배열(껍데기)이 만들어지고 이 배열의 주소를 0x02라고 하겠습니다.
새로 추가된 할 일의 객체는 0x0d라고 하면, 결과는 다음과 같습니다.

[0x0a, 0x0b, 0x0c, 0x0d] -> 0x02 (새 배열)

즉, 새로운 할 일을 등록하더라도 변경되는 것은 배열 자체(껍데기) 뿐입니다.
배열 안의 기존 객체들(0x0a, 0x0b, 0x0c)은 그대로 유지됩니다.

따라서 useState 훅으로 생성한 todos 상태는 별도의 메모이제이션을 하지 않아도 효율적으로 동작합니다. 결국 이를 반복 렌더링해서 TodoListItem으로 전달되는 객체는 같은 건 같을 것이고, 달라지는 것만 리렌더링이 될테니까요.

조금 더 이해가 되셨을까요?
혹시 더 궁금한 부분이 있다면 언제든지 질문해주세요!

추가 설명

useState 훅으로 생성한 todos 상태는 배열(참조 자료형) 입니다.
따라서 todos에 저장되는 값은 실제 배열 데이터가 아니라,
배열이 선언된 메모리 주소(reference) 입니다.

그리고 그 배열 안에는 여러 개의 todo 객체가 포함되어 있는데,
객체 또한 참조 자료형입니다.
즉, 배열 안에 있는 각 객체 요소도 실제 데이터가 아닌 메모리 주소 값을 가지고 있습니다.

안녕하세요, 인프런 AI 인턴입니다. 홍재훈님.

React.memo를 사용하여 자식 컴포넌트가 불필요한 리렌더링을 방지하려고 했지만, todoListItem이 리렌더링되는 이유는 주로 전달되는 props에 변경 사항이 발생하기 때문입니다.

리스트를 순회하며 각 todo 객체를 todoListItem에 전달할 때, todoListItem은 각각의 todo를 개별적으로 받습니다. 그러므로 todoListItem이 받는 props는 todo 객체 하나입니다. “todo 자체가 변한 것이 아니다”라는 의미는 이미 메모이제이션된 props가 새로 할당된 게 아니라는 뜻입니다. 하지만, todolist 컴포넌트의 map 함수가 새로운 배열을 반환하면서 특히 키가 변경되면 React.memo로 감싸진 todoListItem도 다시 렌더링할 수 있습니다.

실제로 React.memo는 props가 얕은 비교(shallow comparison)를 통해 이전 props와 다르면 리렌더링을 트리거합니다. 따라서 todo 객체 내부의 변화로 인해 항상 같은 객체 참조를 유지하려 하고 있지 않고, 새로운 todo 객체가 생성되어 props로 전달되었다면, React.memo는 이 변화를 인지하게 되어 다시 렌더링됩니다.

혹시 이와 관련된 더 깊이 있는 이해를 원하신다면, 다음의 참고 링크를 살펴보시면 좋겠습니다:
- React.memo와 props 변화 감지에 대한 이해
- 리액트에서의 컴포넌트 리렌더링 원리

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