불변성을 지키며 수정 삭제를 할때도 Map이 유리한가요?
안녕하세요 31. 히든클래스와 성능저하모드 강의를 듣고 질문남깁니다.
해당 강의를 react에 적용해보고 있습니다.
기존에는 useState를 사용해서 상태관리를할때 object와 Map은 수정 삭제시 대부분의 경우 불변성을 지키며 setState를 하고 있었습니다.
매번 Map과 object를 재생성할때 Map이 좀더 메모리를 많이 차지한다고 들어서 비번한 수정/삭제가 일어날때는 Map대신 object를 사용해서 상태관리를 하고 있었는데
Map 강의듣고나니 일반적인 수정삭제일때는 Map이 좋은걸로 이해했는데 불변성을 지켜야할 때는 기존에 제가 가지고 있던 생각이 맞는지 의문이 생겼습니다.
불변성을 반드시 지켜야하는건 아니지만 그래도 지켜야 하다 가정하고 수정삭제가 1초에 1번정도 난다고 해도 Map이 유리한가요?
Câu trả lời 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 키)이 필요할까?" 라는 기준으로 선택하면 됩니다. 만약 빈번한 업데이트가 병목이 된다면 그것은 데이터 타입의 문제가 아닌 상태 관리 도구를 어떤 식으로 활용할지 고민해보는게 더 좋습니다.
Next.js 사전렌더링 이해하기 부분
0
3
1
subagents에 관한 질문이 있습니다.
0
7
1
클로드 코드 설치가 되지 않습니다...
0
12
1
output sytles 모든 프로젝트 적용시 디렉토리가 헷갈립니다 ㅠㅠ
0
13
1
터미널 줄바꿈 세팅
0
14
1
Cursor 설정
0
10
1
setting.json과 setting.local.json
0
16
1
카드 뉴스 만들기..
0
17
0
기존 mcp를 플러그인으로 대체
0
14
1
바이브코딩을 하는 개발자(작업복잡도 판단의 어려움)
0
15
1
커서에서 클로드 코드 실행했는데 쉬프트 +엔터가 안먹히는데요.
0
11
1
claw code 에 대해서는 어떻게 생각하시나요?!
0
21
1
비개발자용 리서치나 논문검색 프로젝트 요청
0
16
1
프론트엔드 학습 수준 문의
0
21
2
Node 관련 질문입니다
0
16
2
30강 Map 자막이 이상합니다.
0
41
1
추천패턴
0
67
1
원시 데이터 할당 방식
0
68
2
배포 관련 내용 추가될 예정이 있을까요?
0
146
1
학습자료는 따로 공유가 안되는건가요?
0
198
2
이벤트 루프 실행 관련
0
144
2
Map 강의 누락된 것 같습니다.
0
151
2
Variable Object 질문
0
159
1
메모이제이션 뒷부분 짤린건가요?
0
209
2