inflearn logo
강의

Khóa học

Chia sẻ kiến thức

Lớp học chuyên sâu về Frontend

31. 히든 클래스와 성능 저하 모드

불변성을 지키며 수정 삭제를 할때도 Map이 유리한가요?

Đã giải quyết

55

grs0412

18 câu hỏi đã được viết

0

안녕하세요 31. 히든클래스와 성능저하모드 강의를 듣고 질문남깁니다.
해당 강의를 react에 적용해보고 있습니다.


기존에는 useState를 사용해서 상태관리를할때 object와 Map은 수정 삭제시 대부분의 경우 불변성을 지키며 setState를 하고 있었습니다.

매번 Map과 object를 재생성할때 Map이 좀더 메모리를 많이 차지한다고 들어서 비번한 수정/삭제가 일어날때는 Map대신 object를 사용해서 상태관리를 하고 있었는데

Map 강의듣고나니 일반적인 수정삭제일때는 Map이 좋은걸로 이해했는데 불변성을 지켜야할 때는 기존에 제가 가지고 있던 생각이 맞는지 의문이 생겼습니다.

불변성을 반드시 지켜야하는건 아니지만 그래도 지켜야 하다 가정하고 수정삭제가 1초에 1번정도 난다고 해도 Map이 유리한가요?



javascript react 함수형-프로그래밍 객체지향 next.js

Câu trả lời 1

1

hoonyhan

안녕하세요

 

깊은 생각을 하고 공부에 임하고 계시군요. 결론부터 말씀드리자면 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

5

1

디스코드 소통창구는 없어졌나요 ??

0

7

1

cd 명령어가 안들어요

0

8

1

클로드 데스크앱과의 차이

0

10

1

nmp run build의 기능

0

5

1

plan mode 개발 계획안 확인 불가

0

13

2

20번강좌에 대한 질문입니다.

0

6

1

명시적 타입 선언(콜론 타입 선언)과 as 타입 단언 차이

0

10

1

max x5 플랜을 결제했습니다.

0

17

1

클로드 초기 설정

0

16

1

사용자 스코프 설정 파일 적용 문제

0

10

1

클로드코드 유료플랜 할인 방법이 있을까요?

0

30

0

싱글턴패턴

0

13

1

API Error : 400 에러의 원인과 해결방법이 궁금합니다!!

0

22

2

퍼미션 권한 설정 문의

0

26

2

30강 Map 자막이 이상합니다.

0

44

1

추천패턴

0

69

1

원시 데이터 할당 방식

0

70

2

배포 관련 내용 추가될 예정이 있을까요?

0

146

1

학습자료는 따로 공유가 안되는건가요?

0

199

2

이벤트 루프 실행 관련

0

144

2

Map 강의 누락된 것 같습니다.

0

154

2

Variable Object 질문

0

160

1

메모이제이션 뒷부분 짤린건가요?

0

210

2