피드로 돌아가기
Dev.toFrontend
원문 읽기
Immutability 도입을 통한 Side Effect 제거 및 Reference Comparison 기반 렌더링 최적화
Immutability — Immutable Data
AI 요약
Context
JavaScript의 Reference 기반 객체 전달 방식으로 인한 의도치 않은 데이터 변조와 Side Effect 발생. State 변경 시 Reference가 유지될 경우 React의 Change Detection 메커니즘이 작동하지 않아 UI 업데이트가 누락되는 구조적 한계 존재.
Technical Solution
- Mutation 대신 Spread Operator를 활용하여 변경 사항이 반영된 새로운 객체/배열 인스턴스를 생성하는 Immutable Data 패턴 적용
- Reference Comparison을 통한 상태 변경 감지 구조를 설계하여 Deep Comparison으로 인한 연산 비용 절감 및 React Re-render 트리거 보장
- Nested Object 구조에서 Shallow Copy의 한계를 극복하기 위해 변경 경로상의 모든 레벨을 재생성하는 전파 방식 채택
- 대규모 데이터셋의 복제 비용 문제를 해결하기 위해 변경된 부분만 생성하고 나머지는 공유하는 Structural Sharing 기법 도입
- 개발 환경 내 Object.freeze 적용을 통한 무단 Mutation 시점의 즉각적인 Error Throwing 체계 구축
실천 포인트
- State 업데이트 시 push, splice, sort 등 원본을 수정하는 Mutating Method 사용 금지 - 깊은 계층의 데이터 업데이트 시 Spread Operator의 Shallow Copy 특성을 고려하여 모든 경로의 참조 갱신 확인 - 빈번한 대량 데이터 업데이트 발생 시 Immer.js 등 Structural Sharing 라이브러리 도입 검토 - 개발 단계에서 Object.freeze를 활용하여 Side Effect 발생 지점을 원천 차단