불변성을 지키며 수정 삭제를 할때도 Map이 유리한가요?
안녕하세요 31. 히든클래스와 성능저하모드 강의를 듣고 질문남깁니다.
해당 강의를 react에 적용해보고 있습니다.
기존에는 useState를 사용해서 상태관리를할때 object와 Map은 수정 삭제시 대부분의 경우 불변성을 지키며 setState를 하고 있었습니다.
매번 Map과 object를 재생성할때 Map이 좀더 메모리를 많이 차지한다고 들어서 비번한 수정/삭제가 일어날때는 Map대신 object를 사용해서 상태관리를 하고 있었는데
Map 강의듣고나니 일반적인 수정삭제일때는 Map이 좋은걸로 이해했는데 불변성을 지켜야할 때는 기존에 제가 가지고 있던 생각이 맞는지 의문이 생겼습니다.
불변성을 반드시 지켜야하는건 아니지만 그래도 지켜야 하다 가정하고 수정삭제가 1초에 1번정도 난다고 해도 Map이 유리한가요?
답변 1
1
안녕하세요
깊은 생각을 하고 공부에 임하고 계시군요. 결론부터 말씀드리자면 1초에 1번 수준에서는 Map와 Object의 성능 차이는 무의미합니다. 그래서 질문의 전제를 살짝 교정해 설명드리도록 하겠습니다.
불변성 패턴 자체의 비용
Map의 경우
setState(prev => new Map(prev).set(key, value))
Object의 경우
setState(prev => ({ ...prev, [key]: value }))
둘 다 매번 새로운 객체와 맵을 생성하는 것은 동일하며, 맵이 메모리를 더 사용하지만 1초에 1번 수준이면 GC가 여유롭게 처리하기 때문에 실질적 차이는 없습니다.
그렇다면 더 맵이 더 많은 메모리를 차지한다는 말의 맥락이 무엇인지 생각해볼 필요가 있는데, 이건 수백만개 이상의 엔트리를 다루는 수준에서 입니다. React를 통한 일반적 데이터에서는 신경 쓸 필요는 없습니다. 이 부분에 있어서 "어떤 게 더 빠른가" 라는 부분은 과도한 사전 최적화에 해당합니다. 오히려 "이 데이터가 Map의 특성(동적 키, 순서 보장, non-string 키)이 필요할까?" 라는 기준으로 선택하면 됩니다. 만약 빈번한 업데이트가 병목이 된다면 그것은 데이터 타입의 문제가 아닌 상태 관리 도구를 어떤 식으로 활용할지 고민해보는게 더 좋습니다.
진짜화면이랑달라서못해먹겟어요먹겟어요
0
6
1
mission 09-01 을 수행할 수 없어요
0
9
1
outputStyle 설정하는데 어디서 문제일까요?
0
9
2
test.txt파일 삭제시 rm명령어이니 클로드의 질문이 있어야 한다고 하셨는데
0
6
1
검은화면
0
13
2
강의교환링크안열려요.....
0
14
1
영상재생에러 [확인부탁드려요!!!]
0
13
1
클로드 채팅에서 코드로 넘어가기
0
16
1
클로드 코드 시작하기
0
13
1
Context API vs Zustand 그리고 Auth
0
19
2
110강부터 따라가기가 힘듭니다...
0
38
1
커서에서 붙여넣기
0
22
1
깃허브 사용시 폴더경로 관련질문
0
18
1
[reducer] 기능별 폴더 구조 설계/ 파일 분리로 유지 보수 가능한 아키텍처 구축
0
14
2
강의자료
0
52
1
30강 Map 자막이 이상합니다.
0
79
1
추천패턴
0
97
1
원시 데이터 할당 방식
0
108
2
배포 관련 내용 추가될 예정이 있을까요?
0
177
1
학습자료는 따로 공유가 안되는건가요?
0
237
2
이벤트 루프 실행 관련
0
174
2
Map 강의 누락된 것 같습니다.
0
191
2
Variable Object 질문
0
195
1
메모이제이션 뒷부분 짤린건가요?
0
252
2