10.3강 React.memo와 컴포넌트 렌더링 최적화 질문

Question

export default memo(TodoItem, (preProps, nextProps) => { if (preProps.id !== nextProps.id) return false; if (preProps.isDone !== nextProps.isDone) return false; if (preProps.content !== nextProps.content) return false; if (preProps.date !== nextProps.date) return false; return true; } 사실상 isDone 빼고 바뀌는 게 없으니 if 부분 지울 수도 있나요? 아니면 위험한가요?

이정환 Winterlood · Answer

안녕하세요 donghun Kang님 이정환입니다. isDone이 다를 때에만 return true가 되도록 조건문을 조정하셔도 됩니다! 반환값만 같다면 동일하게 동작합니다. PS. 줄바꿈이 잘 적용되어 있지 않아 코드 해석이 살짝 어렵네요 🥲 다음부터는 가급적 VSCode 에서 포맷팅 되어 있는 코드로 올려주시면 감사하겠습니다.

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. donghun Kang님. 질문해 주신 내용은 React.memo 를 사용할 때 props 비교 함수를 커스터마이징 하여 특정 조건에서만 컴포넌트가 리렌더링 되는지 여부를 결정하는 부분에 관한 것입니다. 특히, TodoItem 컴포넌트에서 preProps 와 nextProps 의 id , isDone , content , date 를 비교하여 컴포넌트 리렌더링 여부를 결정하고 계신데요. 현재 주어진 로직에서 React.memo를 통한 비교 함수는 false 를 반환하여 모든 조건을 만족했을 때만 렌더링을 막습니다. 만약 isDone 외에는 바뀌지 않는다는 확신이 있을 경우, 다른 항목을 생략해도 될 수 있지만 이는 props 의 변경 가능성에 대한 철저한 검증이 필요합니다. 잠재적인 위험성 데이터 일관성 : isDone 만이 주기적으로 변경된다고 하더라도, 다른 props 가 변경될 가능성도 존재할 수 있습니다. 만약 미래에 기능이 변경되거나 다른 props 가 업데이트된다면 데이터가 적절히 반영되지 않을 위험이 있습니다. 미래 유지보수 : 코드가 단순 검토 시에는 더 명확한 의도를 드러내지만, 데이터 변경 내역을 추적하려면 이제 더 주의해야 합니다. 추천 자료 및 링크 기존에 유사한 상황을 겪었던 다른 질문과 답변들을 통해 더욱 깊은 이해를 얻는 것도 유익할 것 같습니다. 아래의 링크들을 참고하세요: React.memo 메서드와 리렌더링 최적화 props 변화와 React.memo의 조건 이러한 링크들은 React.memo 를 활용하여 리랜더링 최적화에 대해 설명하고 있습니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.