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